time-range-picker

time-range-picker

引入

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

依赖项：element-plus

使用

// 局部注册
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, 当前时间
}