# time-range-picker

### 引入

```
yarn add time-range-picker
npm i time-range-picker

依赖项：element-plus
```

### 使用
```js
// 局部注册
import TimeRangePicker from 'TimeRangePicker'

// 全局注册
import TimeRangePicker from 'TimeRangePicker'
Vue.use(TimeRangePicker)

// 使用
<TimeRangePicker v-model:start="time.start" v-model:end="time.end" />

### 参数

| 参数                  | 说明                                             | 类型          | 可选值                  | 默认值                                      |
| --------------------- | ------------------------------------------------ | ------------- | ----------------------- | ------------------------------------------- |
| start                 | 开始日期时间（必填）                             | String        | --                      |                                             |
| end                   | 结束日期时间（必填）                             | String        | --                      |                                             |
| type                  | 选择类型                                         | String        | 见下方说明 1            | date                                        |
| placeholder           | 选择框默提示文字，前后用 / 隔开                  | String        |                         | 见下方说明 2                                |
| value-format          | 值类型                                           | String        | 见下方说明 3            |                                             |
| disabled              | 是否禁用                                         | Boolean       |                         | false                                       |
| size                  | 组件大小                                         | String        | large medium small mini | medium                                      |
| pickerOptions         | 附加参数                                         | Object        | 见下方说明 4            | {start: '00:00',step: '00:60',end: '23:00'} |
| clearable             | 是否显示清除按钮                                 | Boolean       |                         | true                                        |

### 说明 1（type 可选项）

```
time       时间选择
date-time  日期时间选择
date       日期选择（默认）
year-month 年月选择
month      月份选择
year       年份选择
time-select时间段范围选择
```

### 说明 2（placeholder 默认值）

```
time       起始时间/结束时间
date-time  起始时间/结束时间
date       起始日期/结束日期
year-month 起始月份/结束月份
month      起始月份/结束月份
year       起始年份/结束年份
time-select起始时间/结束时间
```

### 说明 3（value-format 值类型） 第一个为默认

```
time       'HH:mm', 'HH', 'HH:mm:ss'
date-time  'yyyy-MM-dd HH:mm:ss'
date       'yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd'
year-month 'yyyy-MM-dd'
month      'MM'
year       'yyyy'
time-select'HH:mm'
```

### 说明 4 （pickerOptions） 附加属性

```
start 开始时间	string	—	00:00 (time-select有效)
end   结束时间	string	—	23:59 (time-select有效)
step  间隔时间	string	—	00:60 (time-select有效)

startDisabledDate(time, start, end) 开始时间限制方法 (date date-time 有效，同原生disabledDate方法, 后面的第二和第三个参数是开始时间和结束时间)
endDisabledDate(time, start, end) 结束时间限制方法 (date date-time 有效，同原生disabledDate方法, 后面的第二和第三个参数是开始时间和结束时间)
```

#### 组件默认导出了常见的几个时间：

```ts
interface CommonDate {
  currentYear: string[], 本年第一天到今天
  currentMonth: string[], 本月第一天到今天
  currentDay: string[], 本日0点到23点
  pastOneYear: string[], 近一年
  pastOneMonth: string[], 近一月
  nowDate: string, 当前时间
}
```