beyond-datetime
简体中文版,浏览器支持 ie9+ (ie8未经测试过)
fork from http://adphorus.github.io/react-date-range
文档
安装
$ npm install --save beyond-datetime
使用
Calendar
日期选择器
基本用法
;; { console; // Date object } { return <div> <Calendar onChange=thishandlerSelect /> </div> }
增加时间选择
{ console; // Momentjs object } { return <div> <Calendar time onChange=thishandlerSelect /> </div> }
禁止选择前一天以及更早的日期
const invalidDates = { let today = today today today today return +date < +today} { return <div> <Calendar invalidDates=invalidDates /> </div> }
从外部通过属性更新,禁止内部setState进行更新, onChange 事件必须返回 false 阻止内部 state 更新,本例也适用于 DateRange、 Time 组件
{ superprops thisstate = date : } { this return false // 返回false 阻止 Calendar 组件内部刷新 } { return <div> <Calendar date=thisstatedate onChange=thishandlerChange /> </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
日期范围选择器
基本用法
;; { console; } { return <div> <DateRange onChange=thishandlerSelect/> </div> }
使用默认预设(包括今天,昨天,最近7天,最近30天)选择范围
;; { console; } { return <div> <DateRange ranges=defaultRanges onChange=thishandlerSelect /> </div> }
时间过滤
;;const filter = 036912151821015304560015304560 { console; } { return <div> <DateRange timeFilter=filter ranges=defaultRanges onChange=thishandlerSelect /> </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
时间选择器
基本用法
;;const filter = 036912151821015304560015304560 { console; } { return <div> <Time filter=filter onChange=thishandlerSelect/> </div> }
Time API (props)
属性 | 类型 | 说明 | 默认值 |
---|---|---|---|
defaultDate | Date | 设定默认日期值 | - |
date | Date | 设定日期值 | - |
onChange | Function | 改变日期/时间事件 | - |
onConfirm | Function | 通过确定按钮改变日期/时间事件 | - |
confirm | boolean | 显示按钮 | - |
second | boolean | 是否显示秒选择 | true |
filter | Array/Function | 时间过滤 | - |
Trigger
;; { superprops thisstate = date : null } { this } { let date = thisstate return <div> <Trigger target=<Calendar defaultDate=date time onConfirm=thishandlerChange />> <input type="text" value=date ? date : '' /> </Trigger> </div> }
Trigger API (props)
属性 | 类型 | 说明 | 默认值 |
---|---|---|---|
target | Calendar/DateRange | - | - |
wrapStyle | object | Trigger 会默认生成一个 div (style="display:inline-block")标签实现定位, 使用 wrapStyle 进行覆盖该div默认样式 | - |