@trendmicro/react-datepicker

React DatePicker Component

Usage no npm install needed!

<script type="module">
  import trendmicroReactDatepicker from 'https://cdn.skypack.dev/@trendmicro/react-datepicker';
</script>

README

react-datepicker build status Coverage Status

NPM

React DatePicker

image

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
  1. 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

image

Sources

DateTimePicker

image

Sources

DateTimeRangePicker

image

Sources

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