Conversion to Typescript for Antdesign Datepicker

user_1096194 0
Viewed 4477

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.

react-hooks typescript reactjs
3 Answers

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

user_10961940

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(...);
  ...
}
user_2362050

i try this one answer reference, and got warning like this:

images error

and i fix with this:

const [date, setDate] = useState<moment.Moment | null>(moment(new Date()))
  const handleDateChange = (dateObject: moment.Moment | null, dateString: string): void => {
    console.info('date string:', dateString)
    console.info('date obj:', dateObject)
    setDate(dateObject)
  }

hope this one help you who facing this warning while trying to implement antd datepicker in typescript

user_115484160
Related