elementUI时间选择器el-time-picker的坑

一路向前的月光2023-08-18 18:41

html 复制代码

            //开始时间
            <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格式，不然时间选择器会直接报错，无法识别时间类型

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

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

我的做法是拿到后端数据深拷贝一份，相关参数格式自己爱怎么转换就怎么转换，在发送请求时候也是使用深拷贝转换后的数据进行发送