FormidableLabs/react-date-range

Name: react-date-range

Owner: Formidable

Description: A React component for choosing dates and date ranges.

Forked from: Adphorus/react-date-range

Created: 2016-12-14 16:38:36.0

Updated: 2016-12-14 16:38:38.0

Pushed: 2016-12-14 17:58:52.0

Homepage: null

Size: 267

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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

m install --save react-date-range

Usage

Date Picker

rt React, { Component } from 'react';
rt { Calendar } from 'react-date-range';

s 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

rt React, { Component } from 'react';
rt { DateRange } from 'react-date-range';

s 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