Never Propel Marmalade

    react-date-range-clone

    0.9.0 • Public • Published

    react-date-range

    A React component for choosing dates and date ranges. Uses Moment.js for date operations.

    Live Demo : http://adphorus.github.io/react-date-range

    Getting Started

    Installation

    $ npm install --save react-date-range
    

    Usage

    Date Picker

    import React, { Component } from 'react';
    import { Calendar } from 'react-date-range';
     
    class MyComponent extends Component {
        handleSelect(date){
            console.log(date); // Momentjs object
        }
     
        render(){
            return (
                <div>
                    <Calendar
                        onInit={this.handleSelect}
                        onChange={this.handleSelect}
                    />
                </div>
            )
        }
    }
     
    Available Options (props)
    • date: (String, Moment.js object, Function) - default: today
    • format: (String) - default: DD/MM/YYY
    • firstDayOfWeek (Number) - default: moment.localeData().firstDayOfWeek()
    • theme: (Object) see Demo's source
    • onInit: (Function) default: none
    • onChange: (Function) default: none
    • minDate: (String, Moment.js object, Function) default: none
    • maxDate: (String, Moment.js object, Function) default: none

    Range Picker

    import React, { Component } from 'react';
    import { DateRange } from 'react-date-range';
     
    class MyComponent extends Component {
        handleSelect(range){
            console.log(range);
            // An object with two keys,
            // 'startDate' and 'endDate' which are Momentjs objects.
        }
     
        render(){
            return (
                <div>
                    <DateRange
                        onInit={this.handleSelect}
                        onChange={this.handleSelect}
                    />
                </div>
            )
        }
    }
     
    Available Options (props)
    • startDate: (String, Moment.js object, Function) - default: today
    • endDate: (String, Moment.js object, Function) - default: today
    • format: (String) - default: DD/MM/YYY
    • firstDayOfWeek (Number) - default: moment.localeData().firstDayOfWeek()
    • theme: (Object) see Demo's source
    • onInit: (Function) default: none
    • onChange: (Function) default: none
    • linkedCalendars: (Boolean) default: false
    • calendars: (Number) default: 2
    • ranges: (Object) default: none
    • minDate: (String, Moment.js object, Function) default: none
    • maxDate: (String, Moment.js object, Function) default: none

    Install

    npm i react-date-range-clone

    DownloadsWeekly Downloads

    2

    Version

    0.9.0

    License

    MIT

    Last publish

    Collaborators

    • karandikar.mihir