日期 DatePicker
issue

日期选择框

何时使用

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

如何使用

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

  • 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状态颜色由红色改为蓝色