Vue開始結束時間校驗

以上下班時間為例：

　　　　<el-form-item
            style="width:50%;"
            label=" "
            :label-width="formLabelWidth"
            prop="firstTimeStart"
            :rules="[
              {
                required: true,
                message: '請輸入開始時間',
                trigger: 'blur'
              }
            ]"
          >
            <span class="hint">上班</span>
            <el-time-picker
              style="width:70%"
              arrow-control
              v-model="modelForm.firstTimeStart"
              :picker-options="{
                selectableRange: `00:00:00-${
                  modelForm.firstTimeEnd
                    ? modelForm.firstTimeEnd + ':59'
                    : '23:59:00'
                }`
              }"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="任意時間點"
            >
            </el-time-picker>
          </el-form-item>

          <el-form-item
            style="width:50%;"
            label=" "
            :label-width="formLabelWidth"
            prop="firstTimeEnd"
            :rules="[
              {
                required: true,
                message: '請輸入結束時間',
                trigger: 'blur'
              }
            ]"
          >
            <span class="hint">下班</span>
            <el-time-picker
              style="width:70%"
              arrow-control
              v-model="modelForm.firstTimeEnd"
              :picker-options="{
                selectableRange: `${
                  modelForm.firstTimeStart
                    ? modelForm.firstTimeStart + ':59'
                    : '00:00:00'
                }-23:59:00`
              }"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="任意時間點"
            >
            </el-time-picker>
          </el-form-item>

 

 

//開始
v-model="modelForm.firstTimeStart"
              :picker-options="{
                selectableRange: `00:00:00-${
                  modelForm.firstTimeEnd
                    ? modelForm.firstTimeEnd + ':59'
                    : '23:59:00'
                }`
              }"

//結束
v-model="modelForm.firstTimeEnd"
              :picker-options="{
                selectableRange: `${
                  modelForm.firstTimeStart
                    ? modelForm.firstTimeStart + ':59'
                    : '00:00:00'
                }-23:59:00`
              }"