Pitfalls of elementUI time picker el-time-picker

 

 

            //开始时间
            <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>

There is a conversion pit that needs attention here

If the backend gives the default Date object value: "2023-07-31T16:00:00.000Z" or 2023-07-31 16:00:00

This format needs to be converted to the HH:mm:ss format you set, otherwise the time selector will directly report an error and cannot recognize the time type.

You need to negotiate with the backend what type of format to give.

Otherwise, you need to do some series of time conversions

My approach is to get a deep copy of the backend data, and convert the relevant parameter formats however I like. When sending a request, I also use the deep copy converted data to send.