react-datepicker 
React DatePicker
Demo: https://trendmicro-frontend.github.io/react-datepicker
Installation
- Install the latest version of react, moment and react-datepicker:
npm install --save react moment @trendmicro/react-datepicker
- At this point you can import
@trendmicro/react-datepickerand 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
DateTimePicker
Sources
DateTimeRangePicker
Sources
- Controlled
- Uncontrolled
-
Dropdown
- @trendmicro/react-dropdown@0.7.0 or above is required to use
Dropdown.MenuWrapper
- @trendmicro/react-dropdown@0.7.0 or above is required to use
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