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