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

importReact,{Component}from'react';import{Calendar}from'react-date-range';classMyComponentextendsComponent{handleSelect(date){console.log(date);// Momentjs object}render(){return(<div><CalendaronInit={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

importReact,{Component}from'react';import{DateRange}from'react-date-range';classMyComponentextendsComponent{handleSelect(range){console.log(range);// An object with two keys,// 'startDate' and 'endDate' which are Momentjs objects.}render(){return(<div><DateRangeonInit={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