@trendmicro/react-datepicker
v1.0.0-alpha.7
Published
React DatePicker Component
Downloads
4,388
Readme
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-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
DateTimePicker
Sources
DateTimeRangePicker
Sources
- Controlled
- Uncontrolled
- Dropdown
- @trendmicro/[email protected] or above is required to use
Dropdown.MenuWrapper
- @trendmicro/[email protected] 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