Skip to content

trendmicro-frontend/react-datepicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

image

Sources

image

Sources

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