elementUI タイムピッカーの落とし穴 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>

ここには注意が必要なコンバージョンピットがあります

バックエンドがデフォルトの Date オブジェクト値を指定する場合: 「2023-07-31T16:00:00.000Z」または 2023-07-31 16:00:00

この形式は、設定した HH:mm:ss 形式に変換する必要があります。変換しないと、時間セレクターが直接エラーを報告し、時間の種類を認識できません。

どのような形式を与えるかをバックエンドとネゴシエートする必要があります。

それ以外の場合は、一連の時間変換を行う必要があります。

私のアプローチは、バックエンド データのディープ コピーを取得し、関連するパラメーターの形式を好きなように変換し、リクエストを送信するときに、ディープ コピーに変換されたデータも使用して送信します。