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>          )      }  }

项目主页:http://www.open-open.com/lib/view/home/1444488733401