# DatePicker 日期选择器
# DatePicker 概述
选择或输入日期，支持年、月、日期等类型，支持选择范围。
# DatePicker 代码示例
# 基础用法
设置属性 type 为 date 或 daterange 分别显示选择单日和选择范围类型。
设置属性 placement 可以更改选择器出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。
# 日期格式
设置属性 以上是 HUI 支持的日期格式，你可以自由组合出你需要的类型，例如：format 可以改变日期的显示格式，详见 名称 说明 示例 yyyy 年份（四位） 2016 yy 年份（两位） 16 MM 月份（两位） 01 M 月份（一位） 1 MMMM 月份（英文） January MMM 月份（英文简写） Jan dd 日期（两位） 01 d 日期（一位） 1 Do 日期（简写） 1st DD 星期（两位） 00 D 星期（一位） 0 dddd 星期（英文） Monday ddd 星期（英文简写） Mon HH 小时（24小时制两位） 01 H 小时（24小时制一位） 1 hh 小时（12小时制两位） 01 h 小时（12小时制一位） 1 mm 分钟（两位） 01 m 分钟（一位） 1 ss 秒钟（两位） 01 s 秒钟（一位） 1 SSS 毫秒（三位） 019 SS 毫秒（两位） 01 S 毫秒（一位） 1 A 上午与下午（大写） AM/PM a 上午与下午（小写） am/pm ZZ 时区 +0800
注意，format 只是改变显示的格式，并非改变 value 值。
# 日期时间选择
设置属性 type 为 datetime 或 datetimerange 可以选择时间。
设置 format 并且忽略秒，可以只设置小时和分钟维度。
# 年和月
设置属性 type 为 year 或 month 可以使用选择年或月的功能。
# 快捷方式(options)
设置属性 options 对象中的 shortcuts 可以设置快捷选项，详见示例代码。
其中 value 为函数，必须返回一个日期，如果是 daterange 类型，需要返回一个数组。
value 接收任何正确的日期格式，比如 2016-12-24 或 12/24/16 都是正确的。
# 不可选日期(options)
设置属性 options 对象中的 disabledDate 可以设置不可选择的日期。
disabledDate 是函数，参数为当前的日期，需要返回 Boolean 是否禁用这天。
# 带有确认操作
设置属性 confirm，选择日期后，选择器不会主动关闭，需用户确认后才可关闭。
确认按钮并没有影响日期的正常选择。
# 手动控制组件
对于一些定制化的场景，可以使用 slot 配合参数 open 及事件来手动控制组件的显示状态，详见示例和 API。
# 尺寸
通过设置属性 size 为 large 或 small 可以调整选择器尺寸为大或小，默认不填为中。
# 日期选择器出现的位置
通过设置属性 placement 为 ： 可选值为 top、top-start、top-end、bottom、bottom-start、bottom-end、left、left-start、left-end、right、right-start、right-end。
# 是否禁用/只读/编辑
disabled 为 true 时不能提交到后台，不能弹出日期选择器；readonly 为 true 时不能弹出选择器,但值可以提交到后台；editable 为 false 时，输入框不能编辑
# 是否长期有效
showLong 为 true 时，弹出日期选择器底部出现长期按钮，点击长期按钮，日期改为 longValue 的值，如果是双屏日期，原来选择的结束日期改为 longValue 的值
# 事件使用实例
on-change 日期发生变化时触发；on-open-change 弹出日历和关闭日历时触发；on-ok 在 confirm 模式下有效，点击确定按钮时触发
# DatePicker API
# DatePicker props
| 属性 | 说明 | 类型 | 默认值 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| type | 显示类型，可选值为 date、daterange、datetime、datetimerange、year、month、monthrange(v1.0.42) | String | date | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| value | 日期，可以是 JavaScript 的 Date，例如 new Date()，也可以是标准的日期格式，点击右边查看 注意：value 使用 v-model 时，值是 Date 类型，可以配合 @on-change 使用 |
以上是 HUI 支持的日期格式，你可以自由组合出你需要的类型，例如：
| - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| format | 展示的日期格式 |
以上是 HUI 支持的日期格式，你可以自由组合出你需要的类型，例如：
| date | daterange：yyyy-MM-dd datetime | datetimerange：yyyy-MM-dd HH:mm:ss year：yyyy month：yyyy-MM | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| placement | 日期选择器出现的位置，可选值为top top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end | String | bottom-start | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| placeholder | 占位文本 | String | 空 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| options | 选择器额外配置，比如不可选日期与快捷选项，具体项详见下表 | Object | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| time-picker-options | 日期选择器的额外配置，设置不可选择的时分秒，具体项详见下表 | Object | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| confirm | 是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭 | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| open | 手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用 | Boolean | null | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| size | 尺寸，可选值为large和small或者不设置 | String | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| disabled | 是否禁用选择器 | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| clearable | 是否显示清除按钮 | Boolean | true | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| readonly | 完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效 | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| editable | 文本框是否可以输入，只在没有使用 slot 时有效 | Boolean | true | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transfer | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| showFormat | 使输入框双向绑定的值为输入框中的可见值 | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| showTwoPanel | 非范围选择时使用，显示 2 面面板（此属性只在 20 版本及以上使用） | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| autoPlacement | 日期面板方向自适应，其相对于外部第一个非静态定位父元素开始定位（此属性只在 21 版本及以上使用） | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| clearOnIllegal | 输入非法值时清空输入框。支持 date、datetime、datetimerange、daterange 类型下有效，且日期输入值只接受以下格式：yyyyMMdd, yyyy/MM/dd, yyyy-MM-dd；时间部分输入值格式为 HH:mm:ss。（date 类型 v1.0.32 支持，其他三个类型 v1.0.38 支持） | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| showLong | 是否显示长期按钮，点击长期当前日期变为配置制定日期（开启此属性，则必须配置 longValue 长期有效日期属性，v1.0.30 版本及以上有效） | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| longValue | 长期有效日期，需开启 showLong 属性使用 (v1.0.30 版本及以上有效) | Date（仅限年月日格式） | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| pickMode | 选取日期区间的方式 (v1.0.45 版本及以上有效) | String | click：默认值，点击两个日期进行选择 move：可以通过按下左键、移动、放开左键选择 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| tabindex | 设置输入框 tabindex (v1.0.47) | String | Number | -1 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| showToday | 是否显示今天按钮（ type 为 date 有效，且不能与 confirm 同时配置，v1.0.49 版本及以上有效） | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| unlinkPanels | 在 type 为 daterange 时取消两个日期面板之间的联动 (v1.0.60 版本及以上有效) | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| deleteNotAllClear | true: delete 不一键清空值 false: delete 键一键清空 ( v1.0.70 ) | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| defaultValue | 日期选择器打开时显示的默认日期，可选值为 Date 对象或者 String，String 可被 new Date() 解析。若配置该属性，当 showToday 属性为 true 时点击该按钮跳转至默认日期 (v1.0.70 版本及以上有效) | Date | String | 当前系统时间 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| designWeek | 自定义增加 date-table 中日期的类名 (h-date-picker-cells-cell-design) （其实类名根据星期维度）(v1.0.76) [0,1,2,3,4,5,6]: 0-6：星期日，星期一....星期六 | Array | [] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| validateValueChange | js 代码直接对 value 赋值,value 改变时是否触发 form 表单验证 (null,undefined,''之间赋值改变,统一为空值改变不触发验证) | Boolean | true | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| useCurrentTime | 在选择日期时，自动带出当前的时间（仅支持type为 datetime 和 datetimerange 使用） (v1.11.0) | Boolean | false | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| dblclickClose | 在选择日期时(仅支持 type 为 datetime 和 date)，双击选中日期，并关闭弹窗 ,会触发一次 on-change 和一次 on-ok 事件 (v1.11.0) | Boolean | false |
# DatePicker options
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| shortcuts | 设置快捷选项，每项内容： - text | String：显示的文案 - value | Function：返回指定的日期，如需自己控制逻辑，可不设置，并使用 onClick 回调 - onClick | Function：点击时的回调，参数为当前日期选择器的 Vue 实例，当需要自定义复杂操作时，可以使用 | Array | - |
| disabledDate | 设置不可选择的日期，参数为当前的日期，需要返回 Boolean 是否禁用这天 | Function | - |
# DatePicker time-picker-options
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabledHours | 设置不可选择小时，当类型为 range 时，可以使用二维数组分别控制开始和结束时间的不可选小时 (v1.10.0 ) | Array | - |
| disabledMinutes | 设置不可选择分钟，当类型为 range 时，可以使用二维数组分别控制开始和结束时间的不可选分钟 (v1.10.0 ) | Array | - |
| disabledSeconds | 设置不可选择秒数，当类型为 range 时，可以使用二维数组分别控制开始和结束时间的不可选秒 (v1.10.0 ) | Array | - |
# DatePicker events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-change | 日期发生变化时触发 | 已经格式化后的日期，比如 2016-01-01 |
| on-open-change | 弹出日历和关闭日历时触发 | true | false |
| on-ok | 在 confirm 模式下有效，点击确定按钮时触发 | - |
| on-clear | 在 confirm 模式或 clearable = true 时有效，在清空日期时触发 | - |
| on-select-range | 在返回选择时，选择日期触发，返回当前点击日期和状态,只在范围选择时有效 (此方法只在 1.0.9 或以上版本有效) | 第一个参数表示当前日期第二个参数表示返回状态，范围选择是第一次点击返回 false，第二次点击返回 true |
| on-illegal-input | 用户输入值不合法（超出可选日期范围、格式不合法等）时触发事件，需配合开启 clearOnIllegal (1.0.32 及以上版本有效) | 非法输入值 |
| on-focus | 控件获取焦点时触发 | - |
| on-blur | 控件失去焦点时触发 | - |
# DatePicker slot
| 名称 | 说明 |
|---|---|
| 无 | 自定义选择器的显示内容，建议与 open 等参数一起使用，详见示例 |
# DatePicker methods
| 方法 | 说明 |
|---|---|
| focus | 通过 this.refs.xxx.focus() 调用,是当前输入框获取焦点,并打开选择面板 (此方法只在 1.0.9 或以上版本有效) |
| blur | 手动取消输入框焦点 (this.$refs.xxx.blur() ) (此属性只在 1.0.10 或以上版本有效) |