日期 DatePicker
日期选择框
何时使用
例如:表单中需要选择日期时间
如何使用
import DatePicker from 'bee-datepicker';
import 'bee-datepicker/build/DatePicker.css';
能力特性
API
DatePicker
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
prefixCls | 组件的前缀 | String | - | |
className | 添加输入框的样式 | String | - | |
dropdownClassName | 添加下拉面板的样式 | String | - | |
style | 添加内联样式 | Object | - | |
dateRender | 日期表格 | (current, value) => React.Node | - | |
renderSidebar | 侧边栏 | () => React.Node | - | |
renderFooter | 扩展底边栏 | () => React.Node | - | |
renderError | 当输入格式不对的时候显示在输入框下边的错误提示 | () => React.Node | - | |
defaultValue | 默认值,输入框的默认值 | moment | - | |
value | 日期 | moment | - | |
locale | 语言包 | Object | zh_CN | |
format | 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 moment.js | string / string[] | "YYYY-MM-DD" | |
open | 日期组件显示/隐藏,该值可动态改变 | Boolean | false | |
defaultPanelShown | 设置日期组件显示/隐藏的默认状态,该值不可更改 | Boolean | false | |
disabled | 是否禁用功能 | Boolean | false | |
disabledDate | 禁用的日期 | Function(current:moment):Boolean | - | |
disabledTime | 禁用的时间 | Function(current:moment):Object | - | |
showDateInput | 显示日期输入框 | Boolean | true | |
showWeekNumber | 是否显示周数 | Boolean | false | |
showToday | 是否显示今天 | Boolean | true | |
showOk | 底边栏是否显示ok按钮 | Boolean | auto | |
onSelect | 选择日期的回调函数 | Function(date: moment) | - | |
onChange | 日期改变的回调函数 | Function(date: moment) | - | |
onOk | 点击确定按钮的回调 | Function(date: moment) | - | |
onKeyDown | keydown回调 | Function | - | |
enterKeyDown | enter 键是否打开日期面板 | Boolean | true | |
dateInputPlaceholder | 日期的placeholder | String | - | |
showTime | 是否显示时间选择面板 | Boolean | - | |
renderIcon | 更改默认的图标 | Function | () => |
|
closeIcon | 鼠标划过清空内容的icon | Function | () => |
|
getCalendarContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | - | |
keyboardInput | 外层输入框是否支持键盘输入 | Boolean | false | |
iconClick | 日期按钮点击的回调 | Function | - | |
outInputFocus | 外层输入框获得焦点的回调 | Function | - | |
outInputKeydown | 外层输入框keydown回调 | Function | - | |
onOpenChange | 日期面板收起/展开状态改变时的回调 | Function | - | |
showClose | 外层输入框是否显示清空按钮 | Boolean | true | |
onDateInputBlur | 日期面板中输入框失去焦点的回调 | Function | - | |
placement | 日期面板弹出位置,可选 bottomLeft/bottomRight/topRight/topLeft |
string | bottomLeft | |
showHour | 设置showTime={true} 时候,是否显示小时 |
Boolean | true | |
showMinute | 设置showTime={true} 时候,是否显示分钟 |
Boolean | true | |
showSecond | 设置showTime={true} 时候,是否显示秒 |
Boolean | true | |
autoTriggerChange | 点击日期面板的切换年月按钮,是否自动触发 onChange。 | Boolean | true | bee-datepicker@2.3.28新增 |
注:使用keyboardInput时,以下api变化
- 输入内容的格式需要个format格式相同,也可以有部分变化,变化范围参考 moment.js。例如:format='YYYY-MM-DD' 输入 '19-1-1'也可识别
- 当输入日期格式无法转换为 moment 对象时,onChange,onClick回调内对应的moment参数值为 null
MonthPicker
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
prefixCls | 组件的前缀 | String | - |
className | 添加节点的样式 | String | - |
style | 添加内联样式 | Object | - |
value | 当前值,如输入框的值 | moment | - |
defaultValue | 默认值,输入框的默认值 | moment | - |
disabledDate | 禁用的日期 | Function(current:moment):Boolean | - |
onSelect | 选择日期的回调函数 | Function(date: moment) | - |
onChange | 日期改变的回调函数 | Function(date: moment) | - |
monthCellRender | 月份的渲染方法 | function | - |
dateCellRender | 日期的渲染方法 | function | - |
monthCellContentRender | 自定义月份的渲染方法,将被添加渲染内容中 | function | - |
getCalendarContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | - |
locale | 语言包 | Object | zh_CN |
closeIcon | 鼠标划过清空内容的icon | Function | () => |
showClose | 外层输入框是否显示清空按钮 | Boolean | true |
placement | 日期面板弹出位置,可选 bottomLeft/bottomRight/topRight/topLeft |
string | bottomLeft |
format | 日期格式化 | String/Array | "YYYY-MM" |
renderError | 当输入格式不对的时候显示在输入框下边的错误提示 | () => React.Node | - |
RangePicker
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
prefixCls | 组件的前缀 | String | - |
className | 添加节点的样式 | String | - |
style | 添加内联样式 | Object | - |
dateRender | 日期表格 | (current, value) => React.Node | - |
renderSidebar | 侧边栏 | () => React.Node | - |
renderFooter | 扩展底边栏 | () => React.Node | - |
value | 当前选中的区间 | moment[] | - |
defaultValue | 默认选中的区间 | moment[] | - |
locale | 日历的语言 | Object | en_US |
format | 日期格式化 | String | - |
open | 日期组件隐藏、显示 | Boolean | false |
disabledDate | 禁用的日期 | Function(current:moment):Boolean | - |
disabledTime | 禁用的时间 | Function(current:moment):Object | - |
showDateInput | 显示日期输入康 | Boolean | true |
showWeekNumber | 是否显示周数 | Boolean | false |
showToday | 是否显示今天 | Boolean | true |
showOk | 底边栏是否显示ok按钮 | Boolean | auto |
showClear | 是否显示清除按钮 | Boolean | false |
onSelect | 选择日期的回调函数 | Function(date: moment) | - |
onChange | 日期改变的回调函数 | function(dates: [moment, moment], dateStrings: "[string, string]", dateStrings: [string, string]) | - |
onOk | 点击确定按钮的回调 | Function(dates: moment[]) | - |
onHoverChange | 日期被选中的回调 | Function(date: moment) | - |
dateInputPlaceholder | 日期的placeholder | String | - |
type | 是否固定开始或结束选定的值 | enum('both','start', 'end') | - |
getCalendarContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | - |
locale | 语言包 | Object | zh_CN |
closeIcon | 鼠标划过清空内容的icon | Function | () => |
showTime | 是否显示时间选择面板 | Boolean | - |
showClose | 外层输入框是否显示清空按钮 | Boolean | true |
onOpenChange | 日期面板收起/展开状态改变时的回调 | Function | - |
onPanelChange | 日期日期改变时的回调 | Function | - |
onFormControlClear | 外层输入框点击关闭的回调 | Function | - |
onStartInputBlur | 日期面板中 左输入框失去焦点的回调 | Function | e : 事件对象startValue : 开始时间[startValue,endValue] : 包含开始时间和结束时间的数组 |
onEndInputBlur | 日期面板中 右输入框失去焦点的回调 | Function | e : 事件对象endValue : 结束时间[startValue,endValue] : 包含开始时间和结束时间的数组 |
placement | 日期面板弹出位置,可选 bottomLeft/bottomRight/topRight/topLeft |
string | bottomLeft |
showHour | 设置showTime={true} 时候,是否显示小时 |
Boolean | true |
showMinute | 设置showTime={true} 时候,是否显示分钟 |
Boolean | true |
showSecond | 设置showTime={true} 时候,是否显示秒 |
Boolean | true |
WeekPicker
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
placeholder | 输入框placeholder | String | - |
defaultValue | 默认值 | moment | - |
getCalendarContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | - |
locale | 语言包 | Object | zh_CN |
closeIcon | 鼠标划过清空内容的icon | Function | () => |
showClose | 外层输入框是否显示清空按钮 | Boolean | true |
YearPicker
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
placeholder | 输入框placeholder | String | - |
defaultValue | 默认值 | moment | 当前年 |
getCalendarContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | - |
format | 日期格式化 | String | "YYYY" |
disabled | 是否禁用功能 | Boolean | false |
locale | 语言包 | Object | zh_CN |
closeIcon | 鼠标划过清空内容的icon | Function | () => |
showClose | 外层输入框是否显示清空按钮 | Boolean | true |
placement | 日期面板弹出位置,可选 bottomLeft/bottomRight/topRight/topLeft |
string | bottomLeft |
Moment.js
相关的文档地址链接
格式化
var moment = require('moment');
moment().format(); // "2014-09-08T08:02:17-05:00" (ISO 8601)
moment().format("YYYY-MM-DD"); // "2018-08-08"
moment().format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm"
moment().format("ddd, hA"); // "Sun, 3PM"
moment('gibberish').format('YYYY MM DD'); // "Invalid date"
当前时间
var now = moment();
设置语言 (全局)
moment.locale('en'); //英文
moment.locale('zh-cn'); //中文
设置语言 (局部) 1.7.0+
moment().locale('en'); //英文
已支持的键盘操作
按键 | 功能 |
---|---|
↓(下箭) | 打开面板 |
esc | 关闭面板 |
delete | 清除内容 |
注意事项
DatePicker 国际化时,部分 locale 是从 moment 中读取,所以需要先设置 moment 的 locale
import moment from "moment";
moment.locale('en');//设置为英文
更新日志
-
v2.3.26 2020-08-03 ( release地址 )
-
v2.3.13 2020-03-06 ( release地址 )
- bee-datepicker @2.3.13
- [ Feature ] 增加参数enterKeyDown,回车不打开面板
- bee-datepicker @2.3.13
-
v2.2.10 2019-10-10 ( release地址 )
- bee-datepicker @2.2.10
- [Fixbug]多语言包增加 monthFormat 字段
- bee-datepicker @2.2.10
-
v2.2.8 2019-09-21 ( release地址 )
- bee-datepicker @2.2.8
- [Update]format 参数增加默认值。
- [Feature]分割线颜色由 #ccc 变为 #DFE1E6。
- [Update]优化组件额外页脚的样式。
- [Feature]支持自定义属性。
- bee-datepicker @2.2.8
-
v2.2.7 2019-08-26 ( release地址 )
- bee-datepicker @2.2.7
- [Fixbug]更改系统时区后,日期框需要触发 onChange 事件。
- bee-datepicker @2.2.7
-
v2.2.6 2019-08-19 ( release地址 )
- bee-datepicker @2.2.6
- [ Fixbug ] 解决了click和mouseover冒泡问题
- bee-datepicker @2.2.6
-
v2.2.5 2019-08-03 ( release地址 )
- bee-datepicker @2.2.5
- [Feature]新增外层输入框点击关闭的回调。
- bee-datepicker @2.2.5
-
v2.2.4 2019-07-29 ( release地址 )
- bee-datepicker @2.2.4
- [ Fixbug ] bee-datepicker组件,解决了多时区-更改了时区之后,开始时间和结束时间改变,但是气泡里的值没有发生变化.
- bee-datepicker @2.2.4
-
v2.2.2 2019-07-26 ( release地址 )
- bee-datepicker @2.2.2
- [Fixbug]解决 ie11 中,日期框的清除按钮 X 有2个不同样式重叠的问题。
- bee-datepicker @2.2.2
-
v2.1.1 2019-07-06 ( release地址 )
- bee-datepicker @2.1.1
- [Fixbug]RangePicker 只选择开始日期,并关闭面板时,清空了输入框中的值,导致 UI 和数据不一致的问题。
- [Fixbug]在行过滤中出现呼出后不可点击的问题。
- bee-datepicker @2.1.1
-
v2.1.2 2019-07-06 ( release地址 )
- bee-datepicker @2.1.2
- [Fixbug]RangePicker 支持在失焦事件中,以数组的形式,返回开始输入框和结束输入框的值。
- [Fixbug]Rangpicker 快速点击3次及以上同一天会清空值。
- bee-datepicker @2.1.2
-
v2.1.0 2019-07-03 ( release地址 )
- bee-datepicker @2.1.0
- [Fixbug]RangePicker只选择开始日期,并关闭面板时,没有触发onChange事件
- bee-datepicker @2.1.0
-
v2.0.42 2019-06-05 ( release地址 )
- bee-datepicker @2.0.42
- [Feature] DatePicker 日期面板内的输入框增加失去焦点的回调 onDateInputBlur
- [Feature] RangePicker 日期面板内的输入框增加失去焦点的回调 onStartInputBlur onEndInputBlur
- bee-datepicker @2.0.42
-
v2.0.33 2019-05-08 ( release地址 )
- bee-datepicker @2.0.33
- [Feature] 新增 dropdownClassName 面板类名
- [Feature] 日期校验不正确,不关闭日期面板
- [Feature] rangepicker tab按键切换
- [Featrue] 新增closeIcon 自定义鼠标划过清空内容的icon
- bee-datepicker @2.0.33
-
v2.0.29 2019-04-25 ( release地址 )
- bee-datepicker @2.0.29
- [Feature] datepicker format属性支持数组
- bee-datepicker @2.0.29
-
v2.0.28 2019-04-25 ( release地址 )
- bee-datepicker @2.0.28
- [Feature] 新增onKeyDown回调
- bee-datepicker @2.0.28
-
v2.0.19 2019-03-29 ( release地址 )
- [Feature]bee-datepicker @2.0.19
- 日期容器增加className
- [Feature]bee-datepicker @2.0.19
-
v2.0.10 2019-03-19 ( release地址 )
bee-datepicker v2.0.10升级内容
- [Feature]bee-datepicker @2.0.10
- 选中背景色统一为 #FFF7E7
- 文字色统一为 #212121
- 禁用文字色统一为 #909090
- [Feature]bee-datepicker @2.0.10
-
v2.0.8 2019-03-07 ( release地址 )
- [Feature]bee-datepicker @2.0.9
- Datapicker 输入框右侧图标没有居中。
- 日历卡片没有使用最新的form-control、选中日历
- [Feature]bee-datepicker @2.0.9
-
v2.0.6 2019-03-02 ( release地址 )
- [Feature]bee-datepicker @2.0.6
- 解决示例中输入框宽度太长问题
- 输入框hover状态颜色由红色改为蓝色
- [Feature]bee-datepicker @2.0.6