How to use react-datetime with react + typescript (inside tsx)

Question

react-datetime has a typescript definition file included, but it does not work (for me). From what I can see, the ts definition file exports a different type (ReactDatetime) than what is in actual javascript file (Datetime).

I went ahead and changed react-datetime.d.ts typings file to export the (what I think) is correct type (available in gist):

interface Datetime extends React.ComponentClass<DatetimepickerProps> {}
export { Datetime }

And TypeScript complains that it can not find the Datetime:

(26,10): error TS2304: Cannot find name 'Datetime'.

I guess there's something pretty basic I must be missing in terms of typings and this component. Trying to make it work with the original typings file resulted in inability to import the module in the first place, even though the react-datetime.d.ts file was referenced using /// <reference path="../node_modules/react-datetime/react-datetime.d.ts" /> directive.

A minimalistic example of class trying to use <Datetime/>:

/// <reference path="../../node_modules/react-datetime/react-datetime.d.ts" />
import * as React from "react";
import { Datetime } from "react-datetime";


export interface DateTimeResolutionProps { timestamp: number, resolution: number }
export class DateTimeResolutionPicker extends React.Component<DateTimeResolutionProps, {}> {
    render() {
        // console.log(Datetime);
        return (<div>
        <Datetime/>
        </div>);
    }

}

Nitzan Tomer Nitzan Tomer · Accepted Answer · 2016-09-09T19:31:47

You should import it just like you imported the React module:

import * as Datetime from "react-datetime";

Then it won't complain about not finding the Datetime.

As for the names, you decide what the name will be, it can be ReactDatetime if you want:

import * as ReactDatetime from "react-datetime";

The same happens with the React module, if you look at the definition file it will show:

declare namespace __React {
    ...
}

declare module "react" {
    export = __React;
}

How to use react-datetime with react + typescript (inside tsx)

2 Answers