DatePicker 日期选择器
选择某一天
以 日
为基本单位,基础的日期选择控件
基本单位由 type 属性指定。
快捷选项 & 可选区间
通过 shortcuts
配置快捷选项,
禁用日期通过 disabledDate
设置,传入函数
其他日期单位
通过扩展基础的日期选择,可以选择周、月、年或多个日期
时间范围
定制内容
为了更好的类型推导,我们将时间范围选择定制为DateRangePicker
分别使用dataIndex
和 dataIndexEnd
属性,配置 开始时间
和 结束时间
默认值
日期选择器会在用户未选择任何日期的时候默认展示当天的日期。
你也可以使用 defaultValue
来修改这个默认的日期。 请注意该值需要是一个可以解析的 new Date()
对象。
如果类型是 daterange
, default-value
则会设置左边窗口的默认值。
日期格式
使用 format
指定输入框的展示格式。
使用 value-format
指定绑定值的格式。
默认情况下,组件接受并返回Date
对象。
在 这里 查看 Day.js
支持的 format
参数。
数据转换
定制化
这是一个定制化的选项, element-plus
不包含
如果后台需要的是精确到秒的时间戳,这个时候我们就需要做变换了
使用 transfer
属性可以简单实现
设置自定义前缀的内容
前缀内容可以被自定义。
当你从其他vue组件或由渲染函数生成的组件中导入组件时, 你可以设置 prefix-icon
属性来定制前缀内容
自定义内容
弹出框的内容是可以自定义的,在插槽内你可以获取到当前单元格的数据
属性
DatePicker
完全继承了 ElDatePicker
的属性 您可以从下面的链接里找到相关文档
typescript
类型
export type SinglePickerType = ('year' | 'month' | 'date' | 'week' | 'datetime' | 'dates')
export type DatePickerType = Extract<IDatePickerType, SinglePickerType>
export type DateRangePickerType = Exclude<IDatePickerType, DatePickerType>
export type VDatePickerProps = VueProps<typeof ElDatePicker>
export type VBaseDatePickerProps = Omit<VDatePickerProps, 'type'>
export type VSingleDatePickerProps = Omit<VBaseDatePickerProps, 'startPlaceholder' | 'endPlaceholder'> & {
type: DatePickerType
}
export interface VSingleDatePicker<
T extends object,
Key extends DeepKey<T> = DeepKey<T>
> extends VBaseItem<T, Key> {
props?: VPropDef<T, VSingleDatePickerProps>
transfer?: VTransfer<Into<T, Key>, Dayjs | number | Date>
slots?: VDatePickerSlots
}
export type VRangeDatePickerProps = Omit<VBaseDatePickerProps, 'placeholder'> & {
type: DateRangePickerType
}
export interface VRangeDatePicker<
T extends object,
Key extends DeepKey<T> = DeepKey<T>,
EndKey extends DeepKey<T> = DeepKey<T>
> extends VBaseItem<T, Key> {
dataIndexEnd: EndKey
props?: VPropDef<T, VRangeDatePickerProps>
transfer?: VTransfer<Into<T, Key | EndKey>, Dayjs | number | Date>
slots?: VDatePickerSlots
}
export interface VDatePickerSlots {
/**
* 自定义内容
*/
default?(cell: DateCell): JSX.Element | JSX.Element[]
/**
* 自定义范围分割符内容
*/
'range-separator'?(): JSX.Element | JSX.Element[]
}
export type VDatePickerItem<
T extends object,
Key extends DeepKey<T> = DeepKey<T>
> = (VSingleDatePicker<T, Key> | VRangeDatePicker<T, Key>)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49