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/[email protected] 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