关于el-time-picker使用

发表于
字数统计 463 | 阅读时长 2

关于el-time-picker使用字符串，解决项目中的问题。

问题

时间选择计划采用element提供的，默认数据为从后端请求的当前设置

从后端请求回来的时间是字符串，格式为：“hh:mm”，但是看element官方文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <el-time-picker
    v-model="value1"
    :picker-options="{
      selectableRange: '18:30:00 - 20:30:00'
    }"
    placeholder="任意时间点">
  </el-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value1: new Date(2016, 9, 10, 18, 40),
      };
    }
  }
</script>

好像绑定值要Date类型，所以先开始在返回的字符串上一顿操作，先转化为Date类型，提交时再转化回字符串来截取时分，弄得比较复杂。

解决

后来发现并不用这么复杂

1
2
3
4
5
6
7
8
9
10
<el-form-item label="一段模式起始" >
    <el-time-picker v-model="editForm.startTime1" format='HH:mm' value-format="HH:mm"
                    :picker-options="{selectableRange:`00:00:00 -${editForm.endTime1 ? editForm.endTime1+':00' : '23:59:00'}`}">
    </el-time-picker>
</el-form-item>
<el-form-item label="一段模式结束" >
    <el-time-picker v-model="editForm.endTime1" format='HH:mm' value-format="HH:mm"
                    :picker-options="{selectableRange:`${editForm.startTime1 ? editForm.startTime1+':00' : '00:00:00'} - '23:59:00'}`}">
    </el-time-picker>
</el-form-item>

使用

format：设置下拉框时间列表格式；

value-format：设置返回值格式

顺便还解决了一点逻辑问题，开始时间不能大于结束时间或最大时间值， 结束时间不得早于开始时间或时间最小值 ：

picker-options：设置selectableRange实现选择范围的确定，此处动态设需要拼接“秒”的值

注：转载文章请注明出处，谢谢~