日期 DatePicker
issue

v2.3.28
v2.3.28

v2.3.27

v2.3.26

v2.3.25

v2.3.24

v2.3.23

v2.3.22

v2.3.21

v2.3.20

v2.3.19

v2.3.18

v2.3.17

v2.3.16

v2.3.15

v2.3.14

v2.3.13

v2.3.12

v2.3.11

v2.3.10

v2.3.9

v2.3.8

v2.3.7

v2.3.6

v2.3.5

v2.3.4

v2.3.3

v2.3.2

v2.3.1

v2.3.0

v2.2.19

v2.2.18

v2.2.17

v2.2.16

v2.2.15

v2.2.14

v2.2.13

v2.2.12

v2.2.11

v2.2.10

v2.2.9

v2.2.8

v2.2.7

v2.2.6

v2.2.5

v2.2.4

v2.2.3

v2.2.2

v2.2.1

v2.2.0

v2.1.2

v2.1.1

2.1.1

v2.1.0

v2.0.46

v2.0.45

v2.0.44

v2.0.43

v2.0.42

v2.0.41

v2.0.40

v2.0.39

v2.0.38

v2.0.37

v2.0.36

v2.0.35

v2.0.34

v2.0.33

v2.0.32

v2.0.31

v2.0.30

v2.0.29

v2.0.28

v2.0.27

v2.0.26

v2.0.25

v2.0.24

v2.0.23

v2.0.22

v2.0.21

v2.0.20

v2.0.19

v2.0.18

v2.0.17

v2.0.16

v2.0.13

v2.0.12

v2.0.11

v2.0.10

v2.0.9

v2.0.8

v2.0.7

v2.0.6

v2.0.5

v2.0.4

v2.0.3

v2.0.2

v2.0.1

v2.0.0

v2.0.0-beta3

v2.0.0-beta2

v2.0.0-beta1

v2.0.0-beta

v1.3.22

v1.3.21

v1.3.20

v1.3.19

v1.3.18

v1.3.17

v1.3.16

v1.3.15

v1.3.14

v1.3.13

v1.3.12

v1.3.11

v1.3.10

v1.3.10-beta

v1.3.8

v1.3.7

v1.3.5

v1.3.4

v1.2.3

1.0.6

日期选择框

何时使用

例如：表单中需要选择日期时间

如何使用

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.28 2020-08-13 ( release地址 )

Features

增加autoTriggerChange参数，支持设置点击日期面板的切换年月按钮时，不触发onChange (41d6c28)

v2.3.27 2020-08-05 ( release地址 )

Bug Fixes

inputValue没跟随value改变 (a3a856e)

v2.3.26 2020-08-03 ( release地址 )

v2.3.25 2020-07-24 ( release地址 )

Bug Fixes

DatePicker组件，开启属性keyboardInput={true}，需要兼容值为空的情况 (7d7ceef)
删除阻止冒泡代码 (4672af7)

v2.3.24 2020-05-14 ( release地址 )

Bug Fixes

日期范围不能选择bug，触发两次onChange，第二次为undefined (a7b2b7c)

v2.3.23 2020-04-27 ( release地址 )

Bug Fixes

回车如果没有值，回填默认时间，并关闭面板TINPER-2642 (f53612f)

v2.3.22 2020-04-26 ( release地址 )

Bug Fixes

延迟calendar-input 聚焦 (caa6f07)
自动化 (e3e54dc)

v2.3.13 2020-03-06 ( release地址 )


bee-datepicker @2.3.13
[ Feature ] 增加参数enterKeyDown，回车不打开面板

v2.2.10 2019-10-10 ( release地址 )


bee-datepicker @2.2.10
[Fixbug]多语言包增加 monthFormat 字段

v2.2.8 2019-09-21 ( release地址 )


bee-datepicker @2.2.8
[Update]format 参数增加默认值。
[Feature]分割线颜色由 #ccc 变为 #DFE1E6。
[Update]优化组件额外页脚的样式。
[Feature]支持自定义属性。

v2.2.7 2019-08-26 ( release地址 )


bee-datepicker @2.2.7
[Fixbug]更改系统时区后，日期框需要触发 onChange 事件。

v2.2.6 2019-08-19 ( release地址 )


bee-datepicker @2.2.6
[ Fixbug ] 解决了click和mouseover冒泡问题

v2.2.5 2019-08-03 ( release地址 )


bee-datepicker @2.2.5
[Feature]新增外层输入框点击关闭的回调。

v2.2.4 2019-07-29 ( release地址 )


bee-datepicker @2.2.4
[ Fixbug ] bee-datepicker组件，解决了多时区-更改了时区之后，开始时间和结束时间改变，但是气泡里的值没有发生变化.

v2.2.2 2019-07-26 ( release地址 )


bee-datepicker @2.2.2
[Fixbug]解决 ie11 中，日期框的清除按钮 X 有2个不同样式重叠的问题。

v2.2.3 2019-07-26 ( release地址 )


bee-datepicker @2.2.3
[Fixbug]value.localeData 做容错处理。
[Fixbug]传入的 value 通过 moment 格式化。
[Fixbug]阻止日期面板的 onMouseOver 事件冒泡，解决外层 Tooltip 显示异常的问题。
[Fixbug]RangePicker 组件，输入开始时间后，聚焦到结束时间会清空开始输入框的问题。#267

v2.2.0 2019-07-13 ( release地址 )


bee-datepicker @2.2.0
[Fixbug]禁用态日期输入框去掉 hover 样式。
[Feature]日期面板上的输入框在失焦或按 Enter 键时进行校验。#227
[Feature]增加 defaultPanelShown 属性，设置日期组件显示/隐藏的默认状态。#226
[Feature]输入框值为空时，回填默认值并关闭面板。

v2.1.1 2019-07-06 ( release地址 )


bee-datepicker @2.1.1
[Fixbug]RangePicker 只选择开始日期，并关闭面板时，清空了输入框中的值，导致 UI 和数据不一致的问题。
[Fixbug]在行过滤中出现呼出后不可点击的问题。

v2.1.2 2019-07-06 ( release地址 )


bee-datepicker @2.1.2
[Fixbug]RangePicker 支持在失焦事件中，以数组的形式，返回开始输入框和结束输入框的值。
[Fixbug]Rangpicker 快速点击3次及以上同一天会清空值。

v2.1.0 2019-07-03 ( release地址 )


bee-datepicker @2.1.0
[Fixbug]RangePicker只选择开始日期，并关闭面板时，没有触发onChange事件

v2.0.42 2019-06-05 ( release地址 )


bee-datepicker @2.0.42
[Feature] DatePicker 日期面板内的输入框增加失去焦点的回调 onDateInputBlur
[Feature] RangePicker 日期面板内的输入框增加失去焦点的回调 onStartInputBlur onEndInputBlur

v2.0.33 2019-05-08 ( release地址 )


bee-datepicker @2.0.33
[Feature] 新增 dropdownClassName 面板类名
[Feature] 日期校验不正确，不关闭日期面板
[Feature] rangepicker tab按键切换
[Featrue] 新增closeIcon 自定义鼠标划过清空内容的icon

v2.0.29 2019-04-25 ( release地址 )


bee-datepicker  @2.0.29
[Feature] datepicker format属性支持数组

v2.0.28 2019-04-25 ( release地址 )


bee-datepicker  @2.0.28
[Feature] 新增onKeyDown回调

v2.0.19 2019-03-29 ( release地址 )


[Feature]bee-datepicker @2.0.19
日期容器增加className

v2.0.10 2019-03-19 ( release地址 )

bee-datepicker v2.0.10升级内容

[Feature]bee-datepicker @2.0.10
- 选中背景色统一为 #FFF7E7
- 文字色统一为 #212121
- 禁用文字色统一为 #909090

v2.0.8 2019-03-07 ( release地址 )


[Feature]bee-datepicker @2.0.9
Datapicker 输入框右侧图标没有居中。
日历卡片没有使用最新的form-control、选中日历

v2.0.6 2019-03-02 ( release地址 )


[Feature]bee-datepicker @2.0.6
解决示例中输入框宽度太长问题
输入框hover状态颜色由红色改为蓝色

何时使用

如何使用

能力特性

选择日期
禁用日期
不可选择日期和时间
选择年，年月，周，日期范围
动态的改变时间
自定义日期渲染父级容器
自定义展示日期面板，外层输入框可输入
自定义展示日期面板，外层输入框可输入，配合form使用
额外的页脚
使用normal格式化
配合form使用
多语示例

DatePicker
MonthPicker
RangePicker
WeekPicker
YearPicker
Moment.js
已支持的键盘操作

注意事项

更新日志