## datetime-picker
时间选择组件
### Import
```js
import { DatetimePicker } from 'bxs-ui-vue';
```
或
```js
import Vue from 'vue'
import { DatetimePicker } from 'bxs-ui-vue';
Vue.use(DatetimePicker);
```
## Example
#### 实例调用
使用`Vue.use(DatetimePicker)`后，可用`this.$datetime`调用含popUp的日期选择器<br />
```js
this.$datetime({
  value: new Date(),
  type: 'datetime',
  confirmButtonColor:'#508cee',
  confirm(data) {
    console.log(data)
  },
})
//关闭实例
this.$datetime.close()
```
#### 组件调用
##### 选择完整时间
```html
<bxs-datetime-picker
  v-model="currentDate"
  type="datetime"
  :min-date="minDate"
  :max-date="maxDate"
/>
```

```javascript
export default {
  data() {
    return {
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(2019, 10, 1),
      currentDate: new Date()
    };
  }
};
```

##### 选择日期（年月日）

```html
<bxs-datetime-picker
  v-model="currentDate"
  type="date"
  :min-date="minDate"
  :max-date="maxDate"
  :formatter="formatter"
/>
```

```js
export default {
  data() {
    return {
      currentDate: new Date(),
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(2019, 10, 1),
    };
  },
  methods:{
    formatter (type,value){
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      }if (type === 'day') {
        return `${value}日`
      }
      return value;
    },
  }
}
```


##### 选择时间

```html
<bxs-datetime-picker
  v-model="currentDate"
  type="time"
  :min-hour="minHour"
  :max-hour="maxHour"
/>
```

```js
export default {
  data() {
    return {
      currentDate: '12:12:12',
      minHour:2,
      maxHour:12
    };
  }
}
```


## Attribute
### API

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| value | 绑定值 | `Date | String` | `min-*` | 
| type | 类型，可选值为 `date` <br> `time` `year-month` | `String` | `datetime` |
| confirmButtonColor | 确认按钮颜色 | `String` | `#ff5000` |
| min-date | 可选的最小时间，精确到分钟 | `Date` | 十年前 |
| max-date | 可选的最大时间，精确到分钟 | `Date` | 十年后 |
| min-hour | 可选的最小小时，针对 time 类型 | `Number` | `0` |
| max-hour | 可选的最大小时，针对 time 类型 | `Number` | `23` |
| min-minute | 可选的最小分钟，针对 time 类型 | `Number` | `0` |
| max-minute | 可选的最大分钟，针对 time 类型 | `Number` | `59` |
| min-second | 可选的最小秒，针对 time 类型 | `Number` | `0` |
| max-second | 可选的最大秒，针对 time 类型 | `Number` | `59` |
| formatter | 选项格式化函数（小余4列时有效） | `(type, value) => value` | - | 1.1.14 |
| title | 顶部栏标题 | `String` | `''` |
| close | 实例关闭方法 | - |


### Slot
无

### Event
| 事件名称 | 说明 | 回调参数 |
|------|------|------|
| change | 当值变化时触发的事件（组件调用的情况） | 当前 value |
| confirm | 点击完成按钮时触发的事件 | 当前 value |
| cancel | 点击取消按钮时触发的事件 | - |




