# EpDatePickerRange 日期范围选择

基于 el-date-picker 封装的日期范围选择组件，内置快捷选项。

## 基本用法

```vue
<template>
  <EpDatePickerRange v-model="dateRange" />
</template>

<script setup>
import { ref } from 'vue'

const dateRange = ref([])
</script>
```

## Props

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| v-model | 绑定值 ^el^ | `[Date, Date] \| [number, number]` | - |
| type | 类型 ^el^ | `string` | `'daterange'` |
| valueFormat | 值格式 ^el^ | `string` | `'x'` (时间戳) |
| rangeSeparator | 分隔符 ^el^ | `string` | `'~'` |
| startPlaceholder | 开始占位文本 ^el^ | `string` | '开始时间' |
| endPlaceholder | 结束占位文本 ^el^ | `string` | '结束时间' |
| size | 尺寸 ^el^ | `'large' \| 'default' \| 'small'` | `'default'` |
| shortcuts | 快捷选项 ^el^ | `array` | 最近一周/一月/三月 |

> ^el^ 表示继承自 [el-date-picker](https://element-plus.org/zh-CN/component/date-picker.html) 的属性

## 默认快捷选项

- 最近一周
- 最近一月
- 最近三月

## 在 Form 中使用

```tsx
const formItemList = [
  {
    prop: 'orderDate',
    label: '日期范围',
    type: 'EpDatePickerRange',
    props: {
      start: formData.orderDateStart,
      end: formData.orderDateEnd,
    },
    'onUpdate:start': (val) => {
      formData.orderDateStart = val
    },
    'onUpdate:end': (val) => {
      formData.orderDateEnd = val
    },
  }
]
```