React DatePicker
Demo: https://trendmicro-frontend.github.io/react-datepicker
- 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';Initialize state in your React component:
state = {
date: moment().format('YYYY-MM-DD')
};<DatePicker
date={this.state.date}
onSelect={date => {
this.setState(state => ({ date: date }));
}}
/><DatePicker
defaultDate={this.state.date}
onSelect={date => {
// Optional
}}
/>Initialize state in your React component:
state = {
// 2017-08-01
value: moment().format('YYYY-MM-DD')
};<DateInput
value={this.state.value}
onChange={value => {
this.setState(state => ({ value: value }));
}}
/><DateInput
defaultValue={this.state.value}
onChange={value => {
// Optional
}}
/>Initialize state in your React component:
state = {
// 08:00:00
value: moment().format('hh:mm:ss')
};<TimeInput
value={this.state.value}
onChange={value => {
this.setState(state => ({ value: value }));
}}
/><TimeInput
defaultValue={this.state.value}
onChange={value => {
// Optional
}}
/>
- Controlled
- Uncontrolled
- Dropdown
- @trendmicro/[email protected] or above is required to use
Dropdown.MenuWrapper
- @trendmicro/[email protected] or above is required to use
| 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. |
| 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. |
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | '00:00:00' | |
| defaultValue | string | '00:00:00' | |
| onChange | function(value) | Called when the value changes. |
MIT