Nauseating Pumpkin Mush

    @trendmicro/react-datepicker

    1.0.0-alpha.7 • Public • Published

    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

    Install

    npm i @trendmicro/react-datepicker

    DownloadsWeekly Downloads

    717

    Version

    1.0.0-alpha.7

    License

    MIT

    Unpacked Size

    134 kB

    Total Files

    8

    Last publish

    Collaborators

    • trendmicro-frontend
    • cheton
    • rothpeng
    • smalltase