React的日期和日期范围选择控件：react-date-range
jopen
9年前
一个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> ) } }