form-createDatePicker 日期选择器
规则
js
{
type: "DatePicker",
field: "section_day",
title: "活动日期",
value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
props: {
type: "datetimerange",
placeholder:"请选择活动日期",
}
}{
type: "DatePicker",
field: "section_day",
title: "活动日期",
value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
props: {
type: "datetimerange",
placeholder:"请选择活动日期",
}
}value: String | Array
DatePicker
Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| clearable | boolean | false | 是否支持清除 | |
| default-formatted-value | string | [string, string] | null | undefined | Date Picker 格式化后的值 | |
| disabled | boolean | false | 是否禁用 | |
| first-day-of-week | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 日历上一周的开始，0 代表周一 | |
| formatted-value | string | [string, string] | null | undefined | 格式化之后的值 | 2.24.0 |
| input-readonly | boolean | false | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | |
| placement | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start' | 面板的弹出位置 | 2.25.0 | |
| shortcuts | Record<string, number | (() => number)> | Record<string, [number, number] | (() => [number, number])> | undefined | 自定义快捷按钮 | |
| size | 'small' | 'medium' | 'large' | 'medium' | 尺寸 | |
| type | 'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month' | 'year' | 'quarter' | 'date' | Date Picker 的类型 | 'quarter' v2.22.0 | |
| value-format | string | 跟随 format 属性 | 绑定值的格式，详情见 format | |
| on-blur | () => void | undefined | 用户 blur 时执行的回调 | |
| on-focus | () => void | undefined | 用户 focus 时执行的回调 |
Date 类型的 Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| actions | Array<'clear' | 'now'> | null | ['clear', 'now'] | Date 类型的 Date Picker 中支持的操作 | |
| format | string | 'yyyy-MM-dd' | 时间格式化字符串，详情见 format | |
| is-date-disabled | (current: number) => boolean | undefined | 日期禁用的校验函数 | |
| placeholder | string | '选择日期' | 自动填充的提示信息 | |
| on-update:formatted-value | (value: string | null, timestampValue: number | null) => void | undefined | 可控数据更新时触发的回调函数 | 2.24.0 |
| on-update:value | (value: number | null, formattedValue: string | null) => void | undefined | 可控数据更新时触发的回调函数 | formattedValue 2.24.0 |
DateTime 类型的 Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| actions | Array<'clear' | 'now' | 'confirm'> | null | ['clear', 'now', 'confirm'] | DateTime 类型的 Date Picker 中支持的操作 | |
| default-time | string | undefined | 默认时间，格式为 HH:mm:ss | 2.22.0 |
| format | string | 'yyyy-MM-dd HH:mm:ss' | 时间格式化字符串，详情见 format | |
| is-date-disabled | (current: number) => boolean | undefined | 日期禁用的校验函数 | |
| is-time-disabled | (current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean } | undefined | 时间禁用的校验函数 | |
| placeholder | string | '选择日期时间' | 提示信息 | |
| update-value-on-close | boolean | false | 关闭面板时更新值 | |
| on-update:formatted-value | (value: string | null, timestampValue: number | null) => void | undefined | 数据更新时触发的回调函数 | 2.24.0 |
| on-update:value | (value: number | null, formattedValue: string | null) => void | undefined | 数据更新时触发的回调函数 | formattedValue 2.24.0 |
DateRange 类型的 Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| actions | Array<'clear' | 'confirm'> | null | ['clear', 'confirm'] | DateRange 类型的 Date Picker 中支持的用户操作 | |
| end-placeholder | string | '结束日期' | DateRange 中 end 选框的提示信息 | |
| format | string | 'yyyy-MM-dd' | 时间格式化字符串，详情见 format | |
| is-date-disabled | (current: number, phase: 'start' | 'end', value: [number, number] | null) => boolean | undefined | 日期禁用的校验函数 | |
| is-time-disabled | (current: number, phase: 'start' | 'end', value: [number, number] | null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean } | undefined | 时间禁用的校验函数 | |
| close-on-select | boolean | false | 用户选择时间范围后是否自动关闭面板 | |
| separator | string | '至' | start 选框与 end 选框之间的分隔符 | |
| start-placeholder | string | '开始日期' | DateRange 中 start 选框的提示信息 | |
| update-value-on-close | boolean | false | 关闭面板时是否更新值 | |
| on-update:formatted-value | (value: [string, string] | null, timestampValue: [number, number] | null) => void | undefined | 数据更新时触发的回调函数 | 2.24.0 |
| on-update:value | (value: [number, number] | null, formattedValue: [string, string] | null) => void | undefined | 数据更新时触发的回调函数 | formattedValue 2.24.0 |
DateTimeRange 类型的 Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| actions | Array<'clear' | 'confirm'> | null | ['clear', 'confirm'] | DateTimeRange 类型的 Date Picker 中支持的用户操作 | |
| default-time | string | Array<string | undefined> | undefined | 默认时间，格式为 HH:mm:ss | 2.22.0 |
| end-placeholder | string | '结束日期时间' | DateTimeRange 中 end 选框的提示信息 | |
| format | string | 'yyyy-MM-dd HH:mm:ss' | 时间格式化字符串，详情见 format | |
| is-date-disabled | (current: number, phase: 'start' | 'end', value: [number, number] | null) => boolean | undefined | 日期禁用的校验函数 | |
| is-time-disabled | (current: number, phase: 'start' | 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean } | undefined | 时间禁用的校验函数 | |
| separator | string | 'to' | start 选框与 end 选框之间的分隔符 | |
| start-placeholder | string | '开始日期时间' | DateTimeRange 中 start 选框的提示信息 | |
| update-value-on-close | boolean | false | 关闭面板时是否更新值 | |
| on-update:formatted-value | (value: [string, string] | null, timestampValue: [number, number] | null) => void | undefined | 数据更新时触发的回调函数 | 2.24.0 |
| on-update:value | (value: [number, number] | null, formattedValue: [string, string] | null) => void | undefined | 数据更新时触发的回调函数 | formattedValue 2.24.0 |
Month 类型的 Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| actions | Array<'clear' | 'now' | 'confirm'> | null | ['clear', 'now'] | Month 类型的 Date Picker 中支持的操作 | |
| format | string | 'yyyy-MM' | 时间格式化字符串，详情见 format | |
| is-date-disabled | (current: number) => boolean | undefined | 月份禁用的校验函数 | |
| placeholder | string | '选择月份' | 自动填充的提示信息 | |
| on-update:formatted-value | (value: string | null, timestampValue: number | null) => void | undefined | 可控数据更新时触发的回调函数 | 2.24.0 |
| on-update:value | (value: number | null, formattedValue: string | null) => void | undefined | 可控数据更新时触发的回调函数 | formattedValue 2.24.0 |
Year 类型的 Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| actions | Array<'clear' | 'now'> | null | ['clear', 'now'] | Year 类型的 Date Picker 中支持的操作 | |
| format | string | 'yyyy' | 时间格式化字符串，详情见 format | |
| is-date-disabled | (current: number) => boolean | undefined | 年份禁用的校验函数 | |
| placeholder | string | '选择年份' | 自动填充的提示信息 | |
| on-update:formatted-value | (value: string | null, timestampValue: number | null) => void | undefined | 可控数据更新时触发的回调函数 | 2.24.0 |
| on-update:value | (value: number | null, formattedValue: string | null) => void | undefined | 可控数据更新时触发的回调函数 | formattedValue 2.24.0 |