el-time-picker显示时间格式控制----format

原创已于 2024-10-10 22:45:49 修改 · 6.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #vue.js

于 2023-03-21 20:28:02 首次发布

博客主要讲述了在使用el-time-picker时遇到的问题及解决方法。官网未明确显示控制其显示格式的属性，作者尝试多种方式无果后，发现可像el-date-picker一样用format控制显示格式，最后总结不要过度依赖文档，可尝试相似组件的属性。

该文章已生成可运行项目，

一、问题

二、解决方法

三、总结

一、问题

1.官网看了半天，没有属性来控制 el-time-picker 显示的时间格式。只有 value-format来控制值的格式。默认显示成了时:分:秒，搞半天，还想着用css样式隐藏后面的秒。

如下图1-1所示：

官网的el-time-picker的属性搜了半天format,只搜到了： value-format------时间选择器的value格式；Time picker options下面的 value-format:控制下拉项的格式（我本来以为可以用这个来控制显示的格式，结果尝试后发现不可以，如下图1-3所示）

二、解决方法

1.等到我要快放弃的时候，垂死挣扎了一下。发现竟然和 el-date-picker一样，可以直接用 format来控制显示的格式。就离谱！！！！！！

1)代码： :format="'HH:mm'",格式自己设置一下

  <el-time-picker
    is-range
    v-model="value1"
    :format="'HH:mm'"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>

      const  value1=[new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]

2）结果：正确啦！！！！