## 时间
分为两种，一种固定时间点，一种任意时间点
### 固定时间点
提供几个固定的时间点供用户选择。

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>时间large</label>
      <cl-time-select v-model="timeVal" size="large"></cl-time-select>
    </div>
    <div class="flex-line">
      <label>时间medium</label>
      <cl-time-select v-model="timeVal" size="medium"></cl-time-select>
    </div>
    <div class="flex-line">
      <label>时间small</label>
      <cl-time-select v-model="timeVal" size="small"></cl-time-select>
    </div>
    <div class="flex-line">
      <label>时间禁用</label>
      <cl-time-select v-model="timeVal" disabled></cl-time-select>
    </div>
    <div class="flex-line">
      <label>时间只读</label>
      <cl-time-select v-model="timeVal" readonly></cl-time-select>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        timeVal: "",
      }
    }
  }
</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>
<!-- time-1.vue -->
```
### 固定时间范围
`picker-options`属性可配置时间选择内容，分别通过`start`、`end`和`step`指定可选的起始时间、结束时间和步长。还有`minTime`,`maxTime`可配置可选时间范围。

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>起始时间</label>
      <cl-time-select 
        v-model="timeVal1" 
        :picker-options="{
          start: '08:30',
          step: '00:15',
          end: '18:30'
        }">
      </cl-time-select>
    </div>
    <div class="flex-line">
      <label>结束时间</label>
      <cl-time-select 
        v-model="timeVal2" 
        :picker-options="{
          start: '08:30',
          step: '00:15',
          end: '18:30',
          minTime: timeVal1
        }">
      </cl-time-select>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        timeVal1: "",
        timeVal2: ""
      }
    }
  }
</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>
<!-- time-2.vue -->
```
### 任意时间点
提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开`arrow-control`属性则通过界面上的箭头进行选择。

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>正常滚轮选择</label>
      <cl-time-picker v-model="timeVal1"></cl-time-picker>
    </div>
    <div class="flex-line">
      <label>箭头选择</label>
      <cl-time-picker v-model="timeVal2" arrow-control></cl-time-picker>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        timeVal1: "",
        timeVal2: "",
      }
    }
  }
</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>
<!-- time-3.vue -->
```
### 时间范围
可选择任意的时间范围，添加`is-range`属性即可选择时间范围，同样支持`arrow-control`属性。

```html
<template>
  <div class="main-content">
    <cl-time-picker
      is-range
      v-model="timeVal1"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      placeholder="选择时间范围">
    </cl-time-picker>
    <cl-time-picker
      is-range
      arrow-control
      v-model="timeVal2"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      placeholder="选择时间范围">
    </cl-time-picker>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        timeVal1: "",
        timeVal2: "",
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
</style>
<!-- time-4.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-time-select v-model="timeVal" :permission="permissionVal"></cl-time-select>
      </div>
      <div class="flex-line">
        <label>时间范围</label>
        <cl-time-picker
          is-range
          v-model="timeRange"
          :permission="permissionVal">
        </cl-time-picker>
      </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        permissionVal: "w",
        timeVal: "",
        timeRange: "",
      }
    }
  }
</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>
<!-- time-5.vue -->
```

### 属性说明
| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| v-model | string/number | - | 绑定值 |
| validate | string / object | - | 校验规则 |
| permission | string | w | 控件显示权限分为无权限(n)、只读(r)、编辑(w)、必填(b)权限，而且权限在变更后对输入框的影响会立即生效。 |
| size | string | small | 尺寸大小，可选值large, small, mini |
| picker-options | object | - | 详情见下面表格 |
| clearable | boolean | true | 是否可清空 |
| placeholder | string | 请输入内容 | 输入框占位文本 |
| disabled | boolean | false | 禁用 |
| readonly | boolean | false | 是否只读 |
| model-name | string | - | v-model绑定的表达式 |
| editable | boolean | true | 文本框可输入 |
| default-value | Date(TimePicker) / string(TimeSelect) | 可被new Date()解析(TimePicker) / 可选值(TimeSelect) | 可选，选择器打开时默认显示的时间 |
| value-format | string | `HH:mm:ss` | 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 |
| range-separator | string | - | 可选，仅TimePicker时可用，选择范围时的分隔符 |
| arrow-control | boolean | false | 是否使用箭头进行时间选择，仅对`cl-time-picker`有效 |
| is-range | boolean | false | 是否为时间范围选择，仅对`cl-time-picker`有效 |
| start-placeholder | string | - | 范围选择时开始日期的占位内容，仅对`cl-time-picker`有效 |
| end-placeholder | string | - | 范围选择时结束日期的占位内容，仅对`cl-time-picker`有效 |

### 固定时间picker-options
| 参数 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| start | string | 00:00 | 开始时间 |
| end | string | 23:59 | 结束时间 |
| step | string | 00:15 | 间隔时间 |
| minTime | string | 00:00 | 最小时间，小于该时间的时间段将被禁用 |
| maxTime | string | - | 最大时间，大于该时间的时间段将被禁用 |

### 任意时间picker-options
| 参数 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| selectableRange | string / array | - | 可选时间段，例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] |
| format | string | 'HH:mm:ss' | 时间格式化(TimePicker) |




