DateRangePicker
对 Element Plus ElDatePicker 的业务层封装,统一输出格式、内置初始范围生成、支持日期边界禁用。
基础用法
日期范围
日期时间范围
初始偏移范围
API
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| type | "date" | — | 日期选择类型,支持 Element Plus DatePicker 的 type。 | |
| format | string | undefined | — | — | 展示在输入框中的格式。 |
| valueFormat | string | undefined | "YYYY-MM-DD HH:mm:ss" | — | DatePicker 内部绑定格式,也是外部字符串入参的解析格式。 |
| placeholder | string | undefined | "请选择日期" | — | 非范围选择时的占位内容。 |
| startPlaceholder | string | undefined | "开始日期" | — | 范围选择时开始日期的占位内容。 |
| endPlaceholder | string | undefined | "结束日期" | — | 范围选择时结束日期的占位内容。 |
| rangeSeparator | string | undefined | "至" | — | 范围分隔符。 |
| modelValue | [] | — | 外部绑定值,单日期使用单值,范围使用数组。 | |
| outputFormat | string | string[] | undefined | — | — | 输出格式;数组分别对应开始值和结束值。 |
| defaultToday | boolean | undefined | true | — | 首次无值时是否自动使用今天作为默认值。 |
| dateRange | number | number[] | undefined | — | — | 首次无值时生成默认值的日期偏移配置;不参与禁用日期判断。 |
| dateRangeType | ManipulateType | undefined | "day" | — | dateRange 生成默认值时使用的偏移单位。 |
| dateRangeBaseDate | dayjs().toDate() | — | dateRange 生成默认值时使用的基准日期。 | |
| minDate | "0001-01-01 00:00:00" | — | 最小可选日期。 | |
| maxDate | "9999-12-31 23:59:59" | — | 最大可选日期。 | |
| disabledDateRange | — | — | 可选日期边界,范围外日期会被禁用,优先级高于 minDate/maxDate。 | |
| datetimeDisableTypes | ["hours", "minutes", "seconds"] | — | datetime/datetimerange 下需要按边界禁用的时分秒单位。 | |
| shortcuts | false | — | 是否显示快捷项;true 使用默认快捷项,数组使用自定义快捷项。 |
Emits
| 名称 | 参数 | 说明 |
|---|---|---|
| update:modelValue | — | |
| change | — |