# DatetimePicker 选择器

### 介绍

时间选择器，支持日期、年月、时等维度，通常与弹出层组件配合使用。

### 引入

```js
import yDatetimePicker from "yesaway-wui/src/components/yDatetimePicker";
```

## 代码演示

### 基础用法
DatetimePicker 组件通过`v-model`绑定选中日期，通过 `date-format` 属性配置返回日期格式。
```html
<y-datetime-picker date-format="YYYY-mm-dd hh:ii"
                   v-model="r2"></y-datetime-picker>
```

### 选择年月日
通过 `type` 属性来定义需要选择的时间类型，`type` 为 `date` 表示选择年月日，`type` 为 `dateHours` 表示年月日时，默认值为`date`。
```html
<y-datetime-picker type="dateHour"
                   date-format="YYYY-mm-dd hh:ii"
                   v-model="r2"></y-datetime-picker>
```
### 可选日期范围
可分别通过`max-year``min-year``max-date``min-date`设置可选的最大年份、最小年份、最大日期、最小日期
```html
<y-datetime-picker type="dateHour"
                   date-format="YYYY-mm-dd hh:ii"
                   :hour-pools="[6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]"
                   v-model="r2"
                   min-date="1990-03-09 08:00:00"
                   max-date="now"
                   min-year="1900"
                   max-year="2100"></y-datetime-picker>
```

### 配置可选时间
在`type`为`dateHour`时，通过数组 `hour-pools`配置可选的时间。
```html
<y-datetime-picker type="dateHour"
                   date-format="YYYY-mm-dd hh:ii"
                   :hour-pools="[6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]"
                   v-model="r2"
                   max-date="now"></y-datetime-picker>
```


## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前选中的值 | _object_ | --- |
| date | 初始化已选中的日期 | _object_ | --- |
| type | 选择器类型，可选值为`date``dateHour` | _string_ | date |
| max-year | 可选的最大年份 | _number\string_ | 2100 |
| min-year | 可选的最小年份 | _number\string_ | 1900 |
| max-date | 可选的最大日期 | _number\string_ | now |
| min-date | 可选的最小日期 | _number\string_ | 1990-03-09 08:00:00 |

### DateHour Props
当选择器类型为 `dateHour`时，支持以下Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| hour-pools | 可选小时 | _Array_ | --- |

### Events

| 事件名     | 说明                                     | 回调参数            |
| ---------- | ---------------------------------------- | ------------------- |
| update:date      | 选项变化时时触发 | date |