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	-

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	时间过滤	-

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默认样式	-