React的日期和日期范圍選擇控件：react-date-range

一個React的日期和日期范圍選擇控件。使用 Moment.js 來操作日期。

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
• theme: (Object) see Demo's source
• onInit: (Function) default: none
• onChange: (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>
        )
    }
}

項目主頁：http://www.baiduhome.net/lib/view/home/1444488733401