主题
DatePicker 日期选择器
使用
import { KDatePicker } from "@ksware/ksw-ux";用于选择或输入日期
选择某一天
以”日“为基本单位，基础的日期选择控件
基本单位由 type 属性指定。 通过 shortcuts 配置快捷选项， 通过 disabledDate 函数，来设置禁用掉的日期。
便捷型快捷日期选择
当type为daterange或datetimerange时，可以使用showDefaultShortcuts设置快捷选项，快速选择某段时间。
其他日期单位
通过扩展基础的日期选择，可以选择周、月、年或多个日期
选择一段时间
你可以通过如下例子来学习如何设置一个日期范围选择器。
在选择日期范围时，默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前月份，可以使用 unlink-panels 属性解除联动。
选择月份范围
你当然还可以选择一个月的范围。
在选择月份范围时，默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前年份，可以使用 unlink-panels 属性解除联动。
年份范围
你可以通过如下例子来学习如何设置一个年份范围选择器。
在选择范围时，默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前年份，可以使用 unlink-panels 属性解除联动。
默认值
日期选择器会在用户未选择任何日期的时候默认展示当天的日期。 你也可以使用 default-value 来修改这个默认的日期。 请注意该值需要是一个可以解析的 new Date() 对象。
如果类型是 daterange, default-value 则会设置左边窗口的默认值。
日期格式
使用format指定输入框的格式。 使用 value-format 指定绑定值的格式。
默认情况下，组件接受并返回Date对象。
在 这里 查看 Day.js 支持的所有格式。
WARNING
请一定要注意传入参数的大小写是否正确
默认显示日期
在选择日期范围时，你可以指定起始日期和结束日期的默认时间。
默认情况下，开始日期和结束日期的时间部分都是选择日期当日的 00:00:00。 通过 default-time 可以分别指定开始日期和结束日期的具体时刻。 它接受最多两个日期对象的数组。 其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。
设置自定义前缀的内容
前缀内容可以被自定义。
当你从其他vue组件或由渲染函数生成的组件中导入组件时, 你可以设置 prefix-icon 属性来定制前缀内容
自定义内容
弹出框的内容是可以自定义的，在插槽内你可以获取到当前单元格的数据 请注意，自定义内容结构应与默认结构一致，否则可能风格会不一致。
自定义图标
使用插槽自定义图标。
API
Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值，如果它是数组，长度应该是2 | number | string | Object | - |
| readonly | 是否只读 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| editable | 文本框是否可编辑 | boolean | true |
| clearable | 是否显示清除按钮 | boolean | true |
| show-default-shortcuts | 是否显示默认快捷日期 | boolean | true |
| size | 输入框尺寸 | enum | 'base' |
| placeholder | 输入框占位符 | string | - |
| start-placeholder | 开始日期输入框占位符 | string | - |
| end-placeholder | 结束日期输入框占位符 | string | - |
| arrow-control | 是否使用箭头选择日期 | boolean | false |
| type | 日期类型 | enum | 'date' |
| format | 输入框日期格式 | string | 'YYYY-MM-DD HH:mm:ss' |
| popper-class | 下拉框类名 | string | '' |
| range-separator | 日期范围分隔符 | string | '-' |
| default-value | 选择器打开时默认显示的时间 | object | - |
| default-time | 选择器打开时默认显示的时间，如未指定则默认时间值为00:00:00 | object | - |
| value-format | 绑定值的格式。不指定则绑定值为 Date 对象 | string | - |
| date-format | 时间选择器下拉列表中显示的时间格式 | string | - |
| time-format | 时间选择器下拉列表中显示的时间格式 | string | - |
| id | input原生id属性 | string | [string, string] | - |
| name | input原生name属性 | string | [string, string] | - |
| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | false |
| prefix-icon | 日期输入框前缀图标 | string | Component | - |
| clear-icon | 清除按钮图标 | string | Component | - |
| shortcuts | 设置快捷选项，需要传入数组对象 | array | - |
| disabled-date | 设置不可选择的日期，接收一个 Date 对象，返回 true 表示禁用 | Function | - |
| disabled-hours | 禁止选择部分小时选项 | Function | - |
| disabled-minutes | 禁止选择部分分钟选项 | Function | - |
| disabled-seconds | 禁止选择部分秒选项 | Function | - |
| teleported | 是否将弹出层放置于 body 内 | boolean | true |
| cell-class-name | 设置自定义类名 | Function | - |
| empty-values | 组件的空值配置，当选中项的value值在该数组中时，下拉框显示为未选中状态 | array | ['', null, undefined] |
| value-on-clear | 清除按钮点击后，绑定值设置为该值 | string | number | boolean | Function | - |
| show-now | 是否显示 now 按钮 | boolean | true |
| show-default-shortcuts | 是否显示默认快捷日期 | boolean | true |
| shortcut-insert-before 1.2.2 | show-default-shortcuts为 true 时生效，是否将自定义的 shortcuts 插入到默认快捷日期前面 | boolean | false |
| show-recent-day 1.2.2 | show-default-shortcuts为 true 时生效，是否显示近一天日期范围 | boolean | false |
Events
| 事件名 | 描述 | 类型 |
|---|---|---|
| change | 用户确认选定的值时触发 | Function |
| blur | 在组件 Input 失去焦点时触发 | Function |
| focus | 在组件 Input 获得焦点时触发 | Function |
| clear | 可清空的模式下用户点击清空按钮时触发 | Function |
| calendar-change | 如果用户没有选择日期，那默认展示当前日的月份。 仅用于 range | Function |
| panel-change | 当日期面板改变时触发 | Function |
| visible-change | 当 DateTimePicker 的下拉列表出现/消失时触发 | Function |
Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 自定义单元格内容 | - |
| range-separator | 自定义范围分割符内容 | - |
| prev-month | 自定义上个月按钮图标 | - |
| next-month | 自定义下个月按钮图标 | - |
| prev-year | 自定义上一年按钮图标 | - |
| next-year | 自定义下一年按钮图标 | - |
Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| focus | 使组件获取焦点 | Function |
| blur | 使组件失去焦点 | Function |
| handleOpen | 打开日期选择器弹窗 | Function |
| handleClose | 关闭日期选择器弹窗 | Function |