组件

DatePicker 日期控件

输入或选择日期的控件,支持年、月、日期等类型。 API文档 组件问题反馈和讨论

使用方法 #

  • 该控件由两部分组成,日期输入字段和日期选择器,用户可以分别输入开始和结束日期或选择连续的一段日期。

基础样式 #

最基础的日期选择框,只需要使用组件名称"datePicker",然后调动datePicker.init(options)即可
<code>
显示代码

options配置 #

属性
类型(是否必要)
描述
language
string (选填)
目前支持zh-CN(默认)和EN两种选择,可以拓展,不设置读取默认组件库配置
target
string (选填)
选择器,可以不填写直接调取,填写后自动绑定关系,支持class、id、element
type
string (选填)
可选参数:
'month'
'year'
'time'
'week'
'normal'
'range'
'datetime'(默认)
autoClose
boolean (选填)
选择后是否触发自动关闭,默认是true,但当type为'datetime'时候此配置失效
showBtnTools
boolean (选填)
是否显示底部按钮组,默认显示,如果'autoClose'为false的时候此选项无效
format
string (选填)
可以格式化方式为:Y M D H m s, e.g:'YYYY-MM-DD HH:mm:ss'等各种组合
@注意:禁止使用特殊格式显示,比如:中文,特殊字符等;
读取可能会显示不正常
isTabSwitch
boolean (选填)
是否显示头部日期与时间的选项卡,默认是true显示
autoOffset
Object (选填)
{x:number,y:number},分别对应x轴偏移位置和y轴偏移位置
initialDate
Date String (选填)
初始化日期,默认读取input框或者绑定元素取值,或者 new Date(time)对象
//Date String对象可以是以下几种格式
//可以是ISO 8601的字符类型
2013-02-08 # A calendar date part
2013-W06-5 # A week date part
2013-039 # An ordinal date part
//也可以是部分时间片段,日期和时间可以用T或者空格进行分割
2013-02-08T09 # An hour time part separated by a T
2013-02-08 09 # An hour time part separated by a space
2013-02-08 09:30 # An hour and minute time part
2013-02-08 09:30:26 # An hour, minute, and second time part
2013-02-08 09:30:26.123 # An hour, minute, second, and millisecond time part
2013-02-08 24:00:00.000 # hour 24, minute, second, millisecond equal 0 means next day at midnight
//任何一种时间片段都能进行组合
2013-02-08 09 # A calendar date part and hour time part
2013-W06-5 09 # A week date part and hour time part
2013-039 09 # An ordinal date part and hour time part
//如果是部分时间片段,也可以设置相对于UTC的时间格式类型,比如:+-HH:mm, +-HHmm, or Z.
2013-02-08 09+07:00 # +-HH:mm
2013-02-08 09-0100 # +-HHmm
2013-02-08 09Z # Z
2013-02-08 09:30:26.123+07:00 # +-HH:mm
//
如果关于具体的时间格式表示方法不清楚,请参考标准的Moment控件的格式类型
Moment时间类型
minDate
Date String (选填)
限制最小的时间点
maxDate
Date String (选填)
限制最大的时间点
onOpen(time)
function (选填)
日期控件打开时触发,第一个参数是时间,内部指针是配置的options对象
onSelect(time)
function (选填)
日期控件选中时触发,第一个参数是时间,内部指针是配置的options对象
onSure(time)
function (选填)
日期控件点击确定按钮时触发,第一个参数是时间,内部指针是配置的options对象
onClose(time)
function (选填)
日期控件关闭时触发,第一个参数是时间,内部指针是配置的options对象
onClear(time)
function (选填)
日期控件点击清楚按钮时触发,第一个参数是时间,内部指针是配置的options对象