# DatePicker 日期选择器 
输入或选择日期的控件。

## 何时使用
当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

### 基本使用
最简单的用法

@[demo](./demo/basic.vue)


### 日期格式
使用`format`属性，可以自定义显示格式。

使用`value-format`属性，可以自定义值格式。

@[demo](./demo/format.vue)


### 禁止选择一部分日期
设置`disabledDate`为一个函数，返回值为Boolean来确定是否为禁用状态

@[demo](./demo/disabled-date.vue)


### 选择日期区间带快捷选项
可以预设常用的日期范围以提高用户体验。

@[demo](./demo/shortcut.vue)


### 选择时间
设置`type`为`date-time`

@[demo](./demo/date-time.vue)

## props

| 参数         | 说明                 | 类型                     | 可选值                | 默认值         |
| ------------ | -------------------- | ------------------------ | --------------------- | -------------- |
| mode         | 时间选择模式         | string                   | single/range          | single         |
| format       | 用于展示的格式       | string                   | -                     | yyyy年MM月dd日 |
| value        | `v-model`绑定的值    | string/date/number/array | -                     | -              |
| value-format | 值的格式             | string                   | -                     | yyyy-MM-dd     |
| value-type   | 值的类型             | string                   | string/date/timestamp | string         |
| placeholder  | 输入框 placeholder   | string                   | -                     | -              |
| range-separator  | range模式值分隔符   | string                | -                     | -              |
| name         | 输入框 name 属性     | string                   | -                     | -              |
| id           | 输入框 id 属性       | string                   | -                     | -              |
| disabled     | 输入框 disabled 属性 | boolean                  | -                     | false          |
| readonly     | 输入框 readonly 属性 | boolean                  | -                     | false          |
| align        | 输入框文字对其方式   | string                   | -                     | left           |
| type         | 显示类型             | string       | year/month/date/date-time       | date           |
| disabled-date | 设置禁用状态，参数为当前日期，要求返回 Boolean | function(date): boolean | -     | -         |
| disabled-time | 设置不可选时间，返回一个对象，参考`time-picker`组件 | function(date): object | -     | -         |
| shortcuts | 选择时间范围时提供的快捷选项 | string/array | -     | -         |
| icon  | 输入框后置图标  | string  |  ui-icon的icon名    | 'event'  |
| clearable  | 是否能清空已选值  | boolean  |    |  true  |
| show-icon  | 是否显示icon  | boolean  |    |  true  |
| on-change  | 日期更改时回调  | function  |    |  function(dateValue)  |

## events
| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| picked-start | 选择时间范围-开始时间 | startDate |
| picked-end | 选择时间范围-结束时间 | endDate |