DatePicker 日期选择器

规则

{
    type: "DatePicker",
    field: "section_day",
    title: "活动日期",
    value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
    props: {
        type: "datetimerange",
        placeholder:"请选择活动日期",
    }
}

参考:naive-ui_DatePicker

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