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:

`js
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

$3

Initialize state in your React component:
`js
state = {
date: moment().format('YYYY-MM-DD')
};
`

#### Controlled

`js
date={this.state.date}
onSelect={date => {
this.setState(state => ({ date: date }));
}}
/>
`

#### Uncontrolled

`js
defaultDate={this.state.date}
onSelect={date => {
// Optional
}}
/>
`

$3

Initialize state in your React component:
`js
state = {
// 2017-08-01
value: moment().format('YYYY-MM-DD')
};
`

#### Controlled

`js
value={this.state.value}
onChange={value => {
this.setState(state => ({ value: value }));
}}
/>
`

#### Uncontrolled

`js
defaultValue={this.state.value}
onChange={value => {
// Optional
}}
/>
`

$3

Initialize state in your React component:
`js
state = {
// 08:00:00
value: moment().format('hh:mm:ss')
};
`

#### Controlled

`js
value={this.state.value}
onChange={value => {
this.setState(state => ({ value: value }));
}}
/>
`

#### Uncontrolled

`js
defaultValue={this.state.value}
onChange={value => {
// Optional
}}
/>
`

Examples

$3

![image](https://trendmicro-frontend.github.io/react-datepicker)

#### Sources
* Controlled
* Uncontrolled
* Selectable
* Dropdown

$3

![image](https://trendmicro-frontend.github.io/react-datepicker)

#### Sources
* Controlled
* Uncontrolled

$3

![image](https://trendmicro-frontend.github.io/react-datepicker)

#### Sources
* Controlled
* Uncontrolled
* Dropdown
- @trendmicro/react-dropdown@0.7.0 or above is required to use Dropdown.MenuWrapper`

API

$3

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