react-datepicker

React DatePicker

Demo: https://trendmicro-frontend.github.io/react-datepicker

Installation

1. Install the latest version of react, moment and react-datepicker:

npm install --save react moment @trendmicro/react-datepicker

2. At this point you can import @trendmicro/react-datepicker and its styles in your application as follows:

import DatePicker, { DateInput, TimeInput } from '@trendmicro/react-datepicker';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-datepicker/dist/react-datepicker.css';

Usage

DatePicker

Initialize state in your React component:

state = {
    date: moment().format('YYYY-MM-DD')
};

Controlled

<DatePicker
    date={this.state.date}
    onSelect={date => {
        this.setState(state => ({ date: date }));
    }}
/>

Uncontrolled

<DatePicker
    defaultDate={this.state.date}
    onSelect={date => {
        // Optional
    }}
/>

DateInput

Initialize state in your React component:

state = {
    // 2017-08-01
    value: moment().format('YYYY-MM-DD')
};

Controlled

<DateInput
    value={this.state.value}
    onChange={value => {
        this.setState(state => ({ value: value }));
    }}
/>

Uncontrolled

<DateInput
    defaultValue={this.state.value}
    onChange={value => {
        // Optional
    }}
/>

TimeInput

Initialize state in your React component:

state = {
    // 08:00:00
    value: moment().format('hh:mm:ss')
};

Controlled

<TimeInput
    value={this.state.value}
    onChange={value => {
        this.setState(state => ({ value: value }));
    }}
/>

Uncontrolled

<TimeInput
    defaultValue={this.state.value}
    onChange={value => {
        // Optional
    }}
/>

Examples

DatePicker

Sources

• Controlled
• Uncontrolled
• Selectable
• Dropdown

DateTimePicker

Sources

• Controlled
• Uncontrolled

DateTimeRangePicker

Sources

• Controlled
• Uncontrolled
• Dropdown
  • @trendmicro/react-dropdown@0.7.0 or above is required to use Dropdown.MenuWrapper

API

Properties

DatePicker

Name	Type	Default	Description
locale	string	'en'
date	object or string	null
defaultDate	object or string	null
minDate	object or string	null	The minimum selectable date. When set to null, there is no minimum.
maxDate	object or string	null	The maximum selectable date. When set to null, there is no maximum.
onSelect	function(date)		Called when a date is selected.

DateInput

Name	Type	Default	Description
value	object or string	null
defaultValue	object or string	null
minDate	object or string	null	The minimum date. When set to null, there is no minimum.
maxDate	object or string	null	The maximum date. When set to null, there is no maximum.
onChange	function(value)		Called when the value changes.

TimeInput

Name	Type	Default	Description
value	string	'00:00:00'
defaultValue	string	'00:00:00'
onChange	function(value)		Called when the value changes.

License

MIT