awesome-react-date

react-date-range

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

Extend from https://github.com/Adphorus/react-date-range

• Addtionals:

• weekdaysFormat
• monthsFormat
• leftButton: customize left month button
• rightButton: customize right month button

Live Demo : http://phattranky.github.io/awesome-react-date

Getting Started

Installation

$ npm install --save awesome-react-date

Usage

Date Picker

import React, { Component } from 'react';
import { Calendar } from 'awesome-react-date';
 
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
• weekdaysFormat: (Array) - default: [] - Ex: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
• monthsFormat: (Array) - default: [] - Ex: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
• firstDayOfWeek (Number) - default: moment.localeData().firstDayOfWeek()
• theme: (Object) see Demo's source
• onInit: (Function) default: none
• onChange: (Function) default: none
• onlyClasses: (bool) default: none
• leftButton: (element) default: none
• rightButton: (element) 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
• weekdaysFormat: (Array) - default: [] - Ex: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
• monthsFormat: (Array) - default: [] - Ex: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
• 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
• onlyClasses: (bool) default: none
• leftButton: (element) default: none
• rightButton: (element) default: none