elementUI时间选择器el-time-picker的坑-Toy模板网

这篇具有很好参考价值的文章主要介绍了elementUI时间选择器el-time-picker的坑。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

elementUI时间选择器el-time-picker的坑,elementUI,elementui,前端,javascript

            //开始时间
            <el-time-picker
              placeholder="选择时间"
              :format="'HH:mm:ss'" //显示的时间样式
              value-format="HH:mm:ss" //绑定值的样式 
//不给默认为 Date 对象值："2023-07-31T16:00:00.000Z"
              v-model="FormData.startTime"
              style="width: 100%;"
                //时间限制 如果存在结束时间就0点到结束时间可以选择
              :picker-options="{
                selectableRange: `00:00:00-${
                  this.FormData.endTime ? this.FormData.endTime + '' : '23:59:00'
                }`,
              }">
            </el-time-picker>
           <el-time-picker
              :clearable="false"
              placeholder="选择时间"
              :format="'HH:mm:ss'"
              v-model="FormData.endTime"
              value-format="HH:mm:ss"
              style="width: 100%;"
                //如果存在开始时间，从开始时间到24点进行选择
              :picker-options="{
                selectableRange: `${
                  FormData.startTime ? FormData.startTime + '' : '00:00:00'
                }-23:59:59`,
              }">
            </el-time-picker>

这里有一个转换的坑需要注意

如果后端给的为默认为 Date 对象值："2023-07-31T16:00:00.000Z"或者是2023-07-31 16:00:00

这种格式拿到需要进行转换为你设定的HH:mm:ss格式，不然时间选择器会直接报错，无法识别时间类型

需要和后端协商好给什么类型格式

不然需要做一些列的时间转换

我的做法是拿到后端数据深拷贝一份，相关参数格式自己爱怎么转换就怎么转换，在发送请求时候也是使用深拷贝转换后的数据进行发送文章来源地址https://www.toymoban.com/news/detail-648711.html

到了这里，关于elementUI时间选择器el-time-picker的坑的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！