1、问题:
在elementUI中使用el-time-picker,如何只显示时分,并添加范围校验?
2、解决办法
开始时间
<el-form-item
label="开始时间"
prop="beginTime"
style="width: 100%"
>
<el-time-picker
v-model="formData.beginTime"
format="HH:mm"
value-format="HH:mm"
:picker-options="{
selectableRange: `00:00:00 -${
formData.endTime ? formData.endTime + ':00' : '23:59:00'
}`,
}"
></el-time-picker>
</el-form-item>
结束时间
<el-form-item label="结束时间" prop="endTime" style="width: 100%">
<el-time-picker
v-model="formData.endTime"
format="HH:mm"
value-format="HH:mm"
:picker-options="{
selectableRange: `${
formData.beginTime
? formData.beginTime + ':00'
: '00:00:00'
}-23:59:00`,
}"
></el-time-picker>
</el-form-item>
3、总结:
- format:设置下拉框时间列表格式;
- value-format:设置返回值格式
- picker-options:设置selectableRange实现选择范围的确定,此处动态设置需要拼接“秒”的值。