Mixing
Conversion to Typescript for Antdesign Datepicker
I can't figure out how to annotate dateObj parameter in handleDateChange function I've
App.tsx
import { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd'; // for css
import moment from 'moment';
const App = () => {
const [date, setDate] = useState(new Date())
const handleDateChange = (dateObj: Date, dateStr: string) => {
setDate(dateObj);
}
return (
<div className="App">
<DatePicker defaultValue={moment(date)} onChange={handleDateChange} />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Here's what tslint says -
Type '(dateObj: Date, dateStr: string) => void' is not assignable to type '(date: Moment, dateString: string) => void'.
Types of parameters 'dateObj' and 'date' are incompatible.
Type 'Moment' is not assignable to type 'Date'.
Property 'toDateString' is missing in type 'Moment'
But I'm not sure how to overcome this.
reactjs typescript react-hooks
asked Jan 1 at 9:45
kushalvmkushalvm
1,82662855
add a comment |
I can't figure out how to annotate dateObj parameter in handleDateChange function I've
App.tsx
import { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd'; // for css
import moment from 'moment';
const App = () => {
const [date, setDate] = useState(new Date())
const handleDateChange = (dateObj: Date, dateStr: string) => {
setDate(dateObj);
}
return (
<div className="App">
<DatePicker defaultValue={moment(date)} onChange={handleDateChange} />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Here's what tslint says -
Type '(dateObj: Date, dateStr: string) => void' is not assignable to type '(date: Moment, dateString: string) => void'.
Types of parameters 'dateObj' and 'date' are incompatible.
Type 'Moment' is not assignable to type 'Date'.
Property 'toDateString' is missing in type 'Moment'
But I'm not sure how to overcome this.
reactjs typescript react-hooks
asked Jan 1 at 9:45
kushalvmkushalvm
1,82662855
Moment provides their own typings, I've never tried it personally, but check if this helps you out: stackoverflow.com/a/45584936/236205
– Canastro
Jan 1 at 9:48
add a comment |
I can't figure out how to annotate dateObj parameter in handleDateChange function I've
App.tsx
import { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd'; // for css
import moment from 'moment';
const App = () => {
const [date, setDate] = useState(new Date())
const handleDateChange = (dateObj: Date, dateStr: string) => {
setDate(dateObj);
}
return (
<div className="App">
<DatePicker defaultValue={moment(date)} onChange={handleDateChange} />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Here's what tslint says -
Type '(dateObj: Date, dateStr: string) => void' is not assignable to type '(date: Moment, dateString: string) => void'.
Types of parameters 'dateObj' and 'date' are incompatible.
Type 'Moment' is not assignable to type 'Date'.
Property 'toDateString' is missing in type 'Moment'
But I'm not sure how to overcome this.
reactjs typescript react-hooks
asked Jan 1 at 9:45
kushalvmkushalvm
1,82662855
I can't figure out how to annotate dateObj parameter in handleDateChange function I've
App.tsx
import { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd'; // for css
import moment from 'moment';
const App = () => {
const [date, setDate] = useState(new Date())
const handleDateChange = (dateObj: Date, dateStr: string) => {
setDate(dateObj);
}
return (
<div className="App">
<DatePicker defaultValue={moment(date)} onChange={handleDateChange} />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Here's what tslint says -
Type '(dateObj: Date, dateStr: string) => void' is not assignable to type '(date: Moment, dateString: string) => void'.
Types of parameters 'dateObj' and 'date' are incompatible.
Type 'Moment' is not assignable to type 'Date'.
Property 'toDateString' is missing in type 'Moment'
But I'm not sure how to overcome this.
reactjs typescript react-hooks
reactjs typescript react-hooks
asked Jan 1 at 9:45
kushalvmkushalvm
1,82662855
asked Jan 1 at 9:45
kushalvmkushalvm
1,82662855
asked Jan 1 at 9:45
kushalvmkushalvm
1,82662855
asked Jan 1 at 9:45
kushalvmkushalvm
1,82662855
asked Jan 1 at 9:45
kushalvmkushalvm
1,82662855
1,82662855
Moment provides their own typings, I've never tried it personally, but check if this helps you out: stackoverflow.com/a/45584936/236205
– Canastro
Jan 1 at 9:48
add a comment |
Moment provides their own typings, I've never tried it personally, but check if this helps you out: stackoverflow.com/a/45584936/236205
– Canastro
Jan 1 at 9:48
Moment provides their own typings, I've never tried it personally, but check if this helps you out: stackoverflow.com/a/45584936/236205
– Canastro
Jan 1 at 9:48
Moment provides their own typings, I've never tried it personally, but check if this helps you out: stackoverflow.com/a/45584936/236205
– Canastro
Jan 1 at 9:48
add a comment |
2 Answers
2
active
oldest
votes
Just pushing this answer into this topic as it seems to solve this issue and was not marked as correct answer in the other question: How can moment.js be imported with typescript?
You need to import moment() the function and Moment the class separately in TS.
I found a note in the typescript docs here.
/*~ Note that ES6 modules cannot directly export callable functions.
*~ This file should be imported using the CommonJS-style:
*~ import x = require('someLibrary');
So the code to import moment js into typescript actually looks like this:
import { Moment } from 'moment'
....
let moment = require('moment');
...
interface SomeTime {
aMoment: Moment,
}
...
fn() {
...
someTime.aMoment = moment(...);
...
}
answered Jan 1 at 9:54
CanastroCanastro
1,9012334
add a comment |
Just this was required.
const [date, setDate] = useState(moment(new Date()));
const handleDateChange = (dateObj: moment.Moment, dateStr: string): void => {
setDate(dateObj);
}
and then
<DatePicker defaultValue={date} onChange={handleDateChange} />
There is no need to do a separate import for Moment as the interface and NOT class exists on moment namespace as per this reference
answered Jan 1 at 9:59
kushalvmkushalvm
1,82662855
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53994444%2fconversion-to-typescript-for-antdesign-datepicker%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Just pushing this answer into this topic as it seems to solve this issue and was not marked as correct answer in the other question: How can moment.js be imported with typescript?
You need to import moment() the function and Moment the class separately in TS.
I found a note in the typescript docs here.
/*~ Note that ES6 modules cannot directly export callable functions.
*~ This file should be imported using the CommonJS-style:
*~ import x = require('someLibrary');
So the code to import moment js into typescript actually looks like this:
import { Moment } from 'moment'
....
let moment = require('moment');
...
interface SomeTime {
aMoment: Moment,
}
...
fn() {
...
someTime.aMoment = moment(...);
...
}
answered Jan 1 at 9:54
CanastroCanastro
1,9012334
add a comment |
Just pushing this answer into this topic as it seems to solve this issue and was not marked as correct answer in the other question: How can moment.js be imported with typescript?
You need to import moment() the function and Moment the class separately in TS.
I found a note in the typescript docs here.
/*~ Note that ES6 modules cannot directly export callable functions.
*~ This file should be imported using the CommonJS-style:
*~ import x = require('someLibrary');
So the code to import moment js into typescript actually looks like this:
import { Moment } from 'moment'
....
let moment = require('moment');
...
interface SomeTime {
aMoment: Moment,
}
...
fn() {
...
someTime.aMoment = moment(...);
...
}
answered Jan 1 at 9:54
CanastroCanastro
1,9012334
add a comment |
Just pushing this answer into this topic as it seems to solve this issue and was not marked as correct answer in the other question: How can moment.js be imported with typescript?
You need to import moment() the function and Moment the class separately in TS.
I found a note in the typescript docs here.
/*~ Note that ES6 modules cannot directly export callable functions.
*~ This file should be imported using the CommonJS-style:
*~ import x = require('someLibrary');
So the code to import moment js into typescript actually looks like this:
import { Moment } from 'moment'
....
let moment = require('moment');
...
interface SomeTime {
aMoment: Moment,
}
...
fn() {
...
someTime.aMoment = moment(...);
...
}
answered Jan 1 at 9:54
CanastroCanastro
1,9012334
Just pushing this answer into this topic as it seems to solve this issue and was not marked as correct answer in the other question: How can moment.js be imported with typescript?
You need to import moment() the function and Moment the class separately in TS.
I found a note in the typescript docs here.
/*~ Note that ES6 modules cannot directly export callable functions.
*~ This file should be imported using the CommonJS-style:
*~ import x = require('someLibrary');
So the code to import moment js into typescript actually looks like this:
import { Moment } from 'moment'
....
let moment = require('moment');
...
interface SomeTime {
aMoment: Moment,
}
...
fn() {
...
someTime.aMoment = moment(...);
...
}
answered Jan 1 at 9:54
CanastroCanastro
1,9012334
answered Jan 1 at 9:54
CanastroCanastro
1,9012334
answered Jan 1 at 9:54
CanastroCanastro
1,9012334
answered Jan 1 at 9:54
CanastroCanastro
1,9012334
1,9012334
add a comment |
add a comment |
Just this was required.
const [date, setDate] = useState(moment(new Date()));
const handleDateChange = (dateObj: moment.Moment, dateStr: string): void => {
setDate(dateObj);
}
and then
<DatePicker defaultValue={date} onChange={handleDateChange} />
There is no need to do a separate import for Moment as the interface and NOT class exists on moment namespace as per this reference
answered Jan 1 at 9:59
kushalvmkushalvm
1,82662855
add a comment |
Just this was required.
const [date, setDate] = useState(moment(new Date()));
const handleDateChange = (dateObj: moment.Moment, dateStr: string): void => {
setDate(dateObj);
}
and then
<DatePicker defaultValue={date} onChange={handleDateChange} />
There is no need to do a separate import for Moment as the interface and NOT class exists on moment namespace as per this reference
answered Jan 1 at 9:59
kushalvmkushalvm
1,82662855
add a comment |
Just this was required.
const [date, setDate] = useState(moment(new Date()));
const handleDateChange = (dateObj: moment.Moment, dateStr: string): void => {
setDate(dateObj);
}
and then
<DatePicker defaultValue={date} onChange={handleDateChange} />
There is no need to do a separate import for Moment as the interface and NOT class exists on moment namespace as per this reference
answered Jan 1 at 9:59
kushalvmkushalvm
1,82662855
Just this was required.
const [date, setDate] = useState(moment(new Date()));
const handleDateChange = (dateObj: moment.Moment, dateStr: string): void => {
setDate(dateObj);
}
and then
<DatePicker defaultValue={date} onChange={handleDateChange} />
There is no need to do a separate import for Moment as the interface and NOT class exists on moment namespace as per this reference
answered Jan 1 at 9:59
kushalvmkushalvm
1,82662855
edited Jan 1 at 13:02
answered Jan 1 at 9:59
kushalvmkushalvm
1,82662855
answered Jan 1 at 9:59
kushalvmkushalvm
1,82662855
answered Jan 1 at 9:59
kushalvmkushalvm
1,82662855
1,82662855
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53994444%2fconversion-to-typescript-for-antdesign-datepicker%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Moment provides their own typings, I've never tried it personally, but check if this helps you out: stackoverflow.com/a/45584936/236205
– Canastro
Jan 1 at 9:48