Gitee
Appearance
DatePicker 日期选择器
集成DatePicker及TimePickr特性，用于选择日期时间。
基础用法
显示类型
日期选择器type属性用于设置日期时间选择器的显示类型。
最大最小值
默认情况下，日期时间选择器可以选择当前值前十年到未来十年时间。min-date用于自定义设置最小值，max-date用于自定义设置最大值。
自定义显示选项内容
option-formatter 属性用来设置列选项的显示内容, 支持传入一个函数，函数参数为当前列及选项值，返回值会作为列选项的显示内容。
DateTimePickerInput 时间选择器输入框
集成 DatePicker 组件和 Input 组件, 用于在表单中快速使用。
类型
typescript
type DateTimeType = "date time" | "date hours" | "date hours-minutes"
DateTimePicker 属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | Date | -- | 日期选择器当前值 |
| type | DateTimeType | 'date time' | 日期选择器显示类型 |
| min-date | Date | -- | 日期选择器选择范围最小值 |
| max-date | Date | -- | 日期选择器选择范围最大值 |
| option-formatter | (value: number) => string | -- | 自定义显示选项内容 |
| format | string | -- | 日期选择器显示格式 |
| visiableOptionCount | number | 5 | 日期选择器选项可见数量 |
| showToolbar | boolean | true | 日期选择器工具栏是否显示 |
| title | string | -- | 日期选择器工具栏标题 |
DateTimePickerInput 属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | Date | -- | 日期选择器当前值 |
| type | DateTimeType | 'date time' | 日期选择器显示类型 |
| min-date | Date | -- | 日期选择器选择范围最小值 |
| max-date | Date | -- | 日期选择器选择范围最大值 |
| option-formatter | (value: number) => string | -- | 自定义显示选项内容 |
| format | string | -- | 日期选择器显示格式 |
| visiableOptionCount | number | 5 | 日期选择器选项可见数量 |
| showToolbar | boolean | true | 日期选择器工具栏是否显示 |
| title | string | -- | 日期选择器工具栏标题 |
| name | string | -- | 输入框的名称 |
| placeholder | string | -- | 输入框的提示文字 |
| readonly | boolean | false | 输入框是否只读 |
| disabled | boolean | false | 输入框是否禁用 |
| formatter | (value: string | number) => string | number | -- | 格式化函数 |
DateTimePicker & DateTimePickerInput 事件
| 事件名 | 类型 | 说明 |
|---|---|---|
| update:modelValue | EventEmitter<Date> | 值变化事件 |
| change | EventEmitter<Date> | 切换选择项事件 |
| confirm | EventEmitter<Date> | 确认按钮点击事件 |