Form-timepicker时间选择器

我会带着你远行 2022-03-29 09:50 420阅读 0赞

**一、固定时间点**

提供几个固定的时间点供用户选择   
使用 el-time-select 标签，分别通过star、end和step指定可选的起始时间、结束时间和步长

el-time-select类似下拉框，选择有限

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

<el-time-select
      v-model="value1"
      :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }"
      placeholder="选择时间">
    </el-time-select>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            value1: ''
          };
        }
      })
    </script>

**二、任意时间点 **

el-time-picker可任意选择时间，通过selectableRange限制可选时间范围。

提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开arrow-control属性则通过界面上的箭头进行选择。

![20190123174956504.png][]

<el-time-picker
      v-model="value2"
      :picker-options="{
        selectableRange: '18:30:00 - 20:30:00'
      }"
      placeholder="任意时间点">
    </el-time-picker>
    <el-time-picker
      arrow-control
      v-model="value3"
      :picker-options="{
        selectableRange: '18:30:00 - 20:30:00'
      }"
      placeholder="任意时间点">
    </el-time-picker>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            value2: new Date(2016, 9, 10, 18, 40),
            value3: new Date(2016, 9, 10, 18, 40)
          };
        }
      })
    </script>

**三、任意时间范围**   
is-range：属性即可选择时间范围，同样支持arrow-control属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 1][]

<el-time-picker
       is-range
       v-model="value4"
       range-separator="至"
       start-placeholder="开始时间"
       end-placeholder="结束时间"
       placeholder="选择时间范围">
     </el-time-picker>
     <el-time-picker
       is-range
       arrow-control
       v-model="value5"
       range-separator="至"
       start-placeholder="开始时间"
       end-placeholder="结束时间"
       placeholder="选择时间范围">
     </el-time-picker>

### Attributes ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>placeholder</td> 
   <td>非范围选择时的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>start-placeholder</td> 
   <td>范围选择时开始日期的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>end-placeholder</td> 
   <td>范围选择时开始日期的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>is-range</td> 
   <td>是否为时间范围选择，仅对<code>&lt;el-time-picker&gt;</code>有效</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>arrow-control</td> 
   <td>是否使用箭头进行时间选择，仅对<code>&lt;el-time-picker&gt;</code>有效</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>picker-options</td> 
   <td>当前时间日期选择器特有的选项参考下表</td> 
   <td>object</td> 
   <td>—</td> 
   <td>{}</td> 
  </tr> 
  <tr> 
   <td>range-separator</td> 
   <td>选择范围时的分隔符</td> 
   <td>string</td> 
   <td>-</td> 
   <td>'-'</td> 
  </tr> 
 </tbody> 
</table>

### [¶][Link 1]Time Select Options ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>start</td> 
   <td>开始时间</td> 
   <td>string</td> 
   <td>—</td> 
   <td>09:00</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>结束时间</td> 
   <td>string</td> 
   <td>—</td> 
   <td>18:00</td> 
  </tr> 
  <tr> 
   <td>step</td> 
   <td>间隔时间</td> 
   <td>string</td> 
   <td>—</td> 
   <td>00:30</td> 
  </tr> 
  <tr> 
   <td>minTime</td> 
   <td>最小时间，小于该时间的时间段将被禁用</td> 
   <td>string</td> 
   <td>—</td> 
   <td>00:00</td> 
  </tr> 
  <tr> 
   <td>maxTime</td> 
   <td>最大时间，大于该时间的时间段将被禁用</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

### [¶][Link 2]Time Picker Options ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>selectableRange</td> 
   <td>可选时间段，例如<code>'18:30:00 - 20:30:00'</code>或者传入数组<code>['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']</code></td> 
   <td>string / array</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220329/6826b91f72754bacbbe34dd231e6469b.png
[20190123174956504.png]: /images/20220329/32ec57135389400f8810cee0d638e0d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 1]: /images/20220329/f8b68f76ad4a481ab05d7a58cb7452d8.png
[Link 1]: http://element-cn.eleme.io/#/zh-CN/component/time-picker%23time-select-options
[Link 2]: http://element-cn.eleme.io/#/zh-CN/component/time-picker%23time-picker-options