beyond-datetime

简体中文版，浏览器支持 ie9+ （ie8未经测试过）

fork from http://adphorus.github.io/react-date-range

文档

安装

$ npm install --save beyond-datetime

使用

Calendar

日期选择器

基本用法

require('beyond-datetime/css/index.css')
import React, { Component } from 'react';
import { Calendar } from 'beyond-datetime';

class MyComponent extends Component {
	handlerSelect(date){
		console.log(date); // Date object
	}

	render(){
		return (
			<div>
				<Calendar onChange={this.handlerSelect} />
			</div>
		)
	}
}

增加时间选择

class MyComponent extends Component {
	handlerSelect(date){
		console.log(date); // Momentjs object
	}

	render(){
		return (
			<div>
				<Calendar time onChange={this.handlerSelect} />
			</div>
		)
	}
}

禁止选择前一天以及更早的日期

const invalidDates = (date)=>{
	let today = new Date
	today.setHours(0)
	today.setMinutes(0)
	today.setSeconds(0)
	today.setMilliseconds(0)
	return  +date < +today
}

class MyComponent extends Component {

	render(){
		return (
			<div>
				<Calendar invalidDates={invalidDates} />
			</div>
		)
	}
}

从外部通过属性更新，禁止内部setState进行更新， onChange 事件必须返回 false 阻止内部 state 更新，本例也适用于 DateRange、 Time 组件

class MyComponent extends Component {

	constructor(props){
		super(props)
		this.state = {
			date : new Date
		}
	}

	handlerChange(date){
		this.setState({date})
		return false  // 返回false 阻止 Calendar 组件内部刷新
	}

	render(){
		return (
			<div>
				<Calendar date={this.state.date} onChange={this.handlerChange.bind(this)}  />
			</div>
		)
	}
}

Calendar API (props)

属性	类型	说明	默认值
defaultDate	Date	设定默认日期值	-
date	Date	设定日期值	-
onChange	Function	改变日期/时间事件	-
onConfirm	Function	通过确定按钮改变日期/时间事件	-
invalidDates	Function	禁止选择的日期	-
confirm	boolean	显示确定按钮	-
time	boolean	是否显示时间选择	false
second	boolean	是否显示秒选择	true
timeFilter	Array/Function	时间过滤	-
language	string ('en','cn')	时间过滤	'cn'

DateRange

日期范围选择器

基本用法

require('beyond-datetime/css/index.css')
import React, { Component } from 'react';
import { DateRange } from 'beyond-datetime';

class MyComponent extends Component {
	handlerSelect(range){
		console.log(range.startDate,range.endDate);
	}

	render(){
		return (
			<div>
				<DateRange onChange={this.handlerSelect}/>
			</div>
		)
	}
}

使用默认预设（包括今天，昨天，最近7天，最近30天）选择范围

require('beyond-datetime/css/index.css')
import React, { Component } from 'react';
import { DateRange,defaultRanges } from 'beyond-datetime';

class MyComponent extends Component {

	handlerSelect(range){
		console.log(range.startDate,range.endDate);
	}

	render(){
		return (
			<div>
				<DateRange ranges={defaultRanges} onChange={this.handlerSelect} />
			</div>
		)
	}
}

时间过滤

require('beyond-datetime/css/index.css')
import React, { Component } from 'react';
import { DateRange,defaultRanges } from 'beyond-datetime';
const filter = ()=> [[0,3,6,9,12,15,18,21],[0,15,30,45,60],[0,15,30,45,60]]
class MyComponent extends Component {

	handlerSelect(range){
		console.log(range.startDate,range.endDate);
	}

	render(){
		return (
			<div>
				<DateRange timeFilter={filter} ranges={defaultRanges} onChange={this.handlerSelect} />
			</div>
		)
	}
}

DateRange API (props)

属性	类型	说明	默认值
defaultStartDate	Date	设定默认的开始日期值	-
defaultEndDate	Date	设定默认的结束日期值	-
startDate	Date	设定开始日期值	-
endDate	Date	设定结束日期值	-
onChange	Function	改变日期/时间事件	-
onConfirm	Function	通过确定按钮改变日期/时间事件	-
ranges	Array	快捷的日期范围选择	-
invalidDates	Function	禁止选择的日期	-
time	boolean	是否显示时间选择	false
second	boolean	是否显示秒选择	true
timeFilter	Array/Function	时间过滤	-
startTimeFilter	Array/Function	开始日期时间过滤，优先级高于 timeFilter	-
endTimeFilter	Array/Function	结束日期时间过滤，优先级高于 timeFilter	-
language	string ('en','cn')	时间过滤	'cn'

Time

时间选择器

基本用法

require('beyond-datetime/css/index.css')
import React, { Component } from 'react';
import { Time } from 'beyond-datetime';
const filter = ()=> [[0,3,6,9,12,15,18,21],[0,15,30,45,60],[0,15,30,45,60]]

class MyComponent extends Component {
	handlerSelect(range){
		console.log(range.startDate,range.endDate);
	}

	render(){
		return (
			<div>
				<Time filter={filter} onChange={this.handlerSelect}/>
			</div>
		)
	}
}

Time API (props)

属性	类型	说明	默认值
defaultDate	Date	设定默认日期值	-
date	Date	设定日期值	-
onChange	Function	改变日期/时间事件	-
onConfirm	Function	通过确定按钮改变日期/时间事件	-
confirm	boolean	显示按钮	-
second	boolean	是否显示秒选择	true
filter	Array/Function	时间过滤	-
language	string ('en','cn')	时间过滤	'cn'

Trigger

require('beyond-datetime/css/index.css')
import React, { Component } from 'react';
import { Calendar,Trigger } from 'beyond-datetime';

class MyComponent extends Component {

	constructor(props){
		super(props)
		this.state = {
			date : null
		}
	}

	handlerChange(date){
		this.setState({date})
	}

	render(){
		let {date} = this.state
		return (
			<div>
				<Trigger target={<Calendar defaultDate={date} time onConfirm={this.handlerChange.bind(this)} />}>
					<input type="text" value={date ? date.toString() : '' } />
				</Trigger>
			</div>
		)
	}
}

Trigger API (props)

属性	类型	说明	默认值
target	Calendar/DateRange	-	-
wrapStyle	object	Trigger 会默认生成一个 div (style="display:inline-block")标签实现定位， 使用 wrapStyle 进行覆盖该div默认样式	-