miha miha - 1 year ago 377
TypeScript Question

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

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 (
) than what is in actual javascript file (

I went ahead and changed
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

(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
file was referenced using
/// <reference path="../node_modules/react-datetime/react-datetime.d.ts" />

A minimalistic example of class trying to use

/// <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>


Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download