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` }"

 

posted @ 2020-11-10 14:53  fiamme  阅读(1120)  评论(0编辑  收藏  举报