## 日期

### 基础用法

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>日期large</label>
      <cl-date v-model="dateVal" size="large"></cl-date>
    </div>
    <div class="flex-line">
      <label>日期medium</label>
      <cl-date v-model="dateVal" size="medium"></cl-date>
    </div>
    <div class="flex-line">
      <label>日期small</label>
      <cl-date v-model="dateVal" size="small"></cl-date>
    </div>
    <div class="flex-line">
      <label>日期禁用</label>
      <cl-date v-model="dateVal" disabled></cl-date>
    </div>
    <div class="flex-line">
      <label>日期只读</label>
      <cl-date v-model="dateVal" readonly></cl-date>
    </div>
    <div class="flex-line">
      <label>绑定的值展示</label>
      <cl-input v-model="dateVal" readonly/>
    </div>
    <div class="flex-line">
      <label>日期类型</label>
      <cl-date v-model="dateValue" size="large" format="yyyy-MM-dd"></cl-date>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dateVal: "",
        dateValue:''
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }
</style>
<!-- date-1.vue -->
```
### 默认显示时间
单独添加`show-date`时，默认显示当前时间。通过属性`current-date`传入某时间时，显示传入的时间值。传入`day`属性，可在传入的时间基础间隔固定天数，为正数时退后，负数时提前。`default-time`属性指定选择框中时分秒显示的时间，默认为"00:00:00"。

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>默认当前时间</label>
      <cl-date v-model="dateVal1" show-date></cl-date>
    </div>
    <div class="flex-line">
      <label>默认显示传入的当前时间</label>
      <cl-date v-model="dateVal2" show-date current-date="2021-05-20 00:00:00"></cl-date>
    </div>
    <div class="flex-line">
      <label>当前时间加2天</label>
      <cl-date v-model="dateVal3" show-date :day="2"></cl-date>
    </div>
    <div class="flex-line">
      <label>时分秒选择默认值</label>
      <cl-date v-model="dateVal4" default-time="12:00:00"></cl-date>
    </div>
    <div class="flex-line">
      <label>获取服务器时间</label>
      <cl-date v-model="dateVal5" show-date is-server-date></cl-date>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dateVal1: "",
        dateVal2: "",
        dateVal3: "",
        dateVal4: "",
        dateVal5: "",
      }
    }
  }
</script>
<style>
   .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }
</style>
<!-- date-2.vue -->
```
### 日期格式
使用`format`指定输入框显示的格式；使用`value-format`指定绑定值的格式。

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>显示日期</label>
      <cl-date v-model="dateVal1" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss"></cl-date>
    </div>
    <div class="flex-line">
      <label>日期绑定值</label>
      <span>{{dateVal1}}</span>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dateVal1: "",
      }
    }
  }
</script>
<style>
   .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }
</style>
<!-- date-3.vue -->
```

### 日期范围

```html
<template>
  <div class="main-content">
    <cl-date-picker v-model="dateVal1" />
    <cl-date-picker
      arrow-control
      v-model="dateVal2"
      format="yyyy-MM-dd">
    </cl-date-picker>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dateVal1: "",
        dateVal2: "",
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
</style>
<!-- date-range.vue -->
```

### 权限
添加`permission`属性可传入校验规则，共有四种状态，无权限、只读、编辑、必填。

```html
<template>
  <div class="main-content">
     <div class="flex-line">
        <label>权限控制</label>
        <el-radio-group v-model="permissionVal">
          <el-radio label="n">无权限</el-radio>
          <el-radio label="r">只读</el-radio>
          <el-radio label="w">编辑</el-radio>
          <el-radio label="b">必填</el-radio>
          </el-radio-group> 
      </div>
    <div class="flex-line">
      <label>显示日期</label>
      <cl-date v-model="dateVal1" :permission="permissionVal"></cl-date>
    </div>
    <div class="flex-line">
      <label>日期范围</label>
      <cl-date-picker v-model="dateRange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :permission="permissionVal" />
    </div>
    <div class="flex-line">
      <label>日期时间范围</label>
      <cl-date-picker v-model="dateTimeRange" :permission="permissionVal" />
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dateVal1: "",
        dateRange: "",
        dateTimeRange: "",
        permissionVal: "w",
      }
    }
  }
</script>
<style>
   .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }
</style>
<!-- date-4.vue -->
```


### 属性说明
| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| v-model | string | - | 绑定值 |
| current-date | string | - | 当前时间 |
| validate | string / object | - | 校验规则 |
| permission | string | w | 控件显示权限分为无权限(n)、只读(r)、编辑(w)、必填(b)权限，而且权限在变更后对输入框的影响会立即生效。 |
| default-time | string | 00:00:00 | 默认时间 |
| size | string | small | 尺寸大小，可选值large, small, mini |
| show-date | boolean | false | 是否默认显示当前时间或者current-date传入的时间 |
| is-server-date | boolean | false | `show-date`为`true`时生效，获取服务器时间作为当前时间 |
| day | number | - | 配合show-date 或 current-date属性使用，当日期有默认显示值时，day表示在传入的时间基础上间隔固定天数，为正数时退后，负数时提前 |
| format | string | yyyy-MM-dd HH:mm:ss | 显示在输入框中的格式 |
| value-format | string | yyyy-MM-dd HH:mm:ss | 日期值值格式 |
| placeholder | string | - | 非范围选择时的占位内容 |
| disabled | boolean | false | 禁用 |
| readonly | boolean | false | 是否只读 |
| clearable | boolean | true | 支持清空 |
| start-placeholder |  string | 开始日期 | 范围选择时开始日期的占位内容 |
| end-placeholder | string | 结束日期 | 范围选择时结束日期的占位内容 |
| popper-class |  string | — | DatePicker 下拉框的类名 |
| picker-options | object |  — | 当前时间日期选择器特有的选项参考下表 |
| range-separator |  string | — | 选择范围时的分隔符 |
| unlink-panels | boolean | false | 在范围选择器里取消两个日期面板之间的联动 |

### Picker Options
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
| cellClassName | 设置日期的 className | Function(Date) | — | — |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
| onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |

### Events
| 事件名称      | 说明    | 回调参数      |
|---------|--------|---------|
| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |
| blur | 当 input 失去焦点时触发 | 组件实例 |
| focus | 当 input 获得焦点时触发 | 组件实例 |
