DatePicker
分段输入框加右侧日历按钮:能直接敲,也能点开日历选。外观与 XInput / XSelect 同一个壳,值是 ISO 字符串。
单日与范围
2026
/10
/31
值:2026-10-31
年
/月
/日
年
/月
/日
值:(空)
XDatePicker的v-model是 ISO 日期,选中即收起;min/max/isDateDisabled同 Calendar。XDateRangePicker的v-model是{ start, end },两端都含;弹层并排两个月(numberOfMonths),选完两端才收起。- 范围弹层左侧是快捷项,缺省今天、近 7 天、近 30 天、本月(「近 N 天」含今天),点了直接定值并收起。传
shortcuts换成自己的({ label, range: (today) => ({ start, end }) }),false不显示。
放进筛选面板
值本身就是字符串,直接摊进查询参数(createdFrom / createdTo),useTable 的查询不用再转格式。
筛选面板里的日期范围
年
/月
/日
年
/月
/日
{}API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
weekStartsOn | 0 | 1 | 5 | 2 | 3 | 4 | 6 | undefined | 1 | — |
ariaLabel | string | undefined | undefined | — |
min | string | undefined | undefined | 最早可选(`2026-01-01`) |
max | string | undefined | undefined | 最晚可选 |
isDateDisabled | ((date: string) => boolean) | undefined | undefined | 单独禁掉某些日子(周末、节假日),入参是 ISO 日期 |
disabled | boolean | undefined | false | — |
readonly | boolean | undefined | false | — |
size | "mini" | "small" | "medium" | "large" | "super" | undefined | undefined | 尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size |
variant | FieldVariant | undefined | undefined | — |
modelValue | string | undefined | — | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue | [value: string | undefined] | — |
XDateRangePicker
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
weekStartsOn | 0 | 1 | 5 | 2 | 3 | 4 | 6 | undefined | 1 | — |
numberOfMonths | number | undefined | 2 | 弹层里并排几个月,缺省 2 |
shortcuts | false | DateRangeShortcut[] | undefined | undefined | 左侧的快捷范围;缺省今天、近 7 天、近 30 天、本月,传 `false` 不显示 |
ariaLabel | string | undefined | undefined | — |
min | string | undefined | undefined | 最早可选(`2026-01-01`) |
max | string | undefined | undefined | 最晚可选 |
isDateDisabled | ((date: string) => boolean) | undefined | undefined | 单独禁掉某些日子(周末、节假日),入参是 ISO 日期 |
disabled | boolean | undefined | false | — |
readonly | boolean | undefined | false | — |
size | "mini" | "small" | "medium" | "large" | "super" | undefined | undefined | 尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size |
variant | FieldVariant | undefined | undefined | — |
modelValue | DateRange | undefined | — | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue | [value: DateRange | undefined] | — |