在开发项目的时候,会经常用到时间选择器,但是ElementUI文档上给的示例是带有秒的。
下面就是实现只显示小时和分钟的代码。
<el-form :model="formdata" style="margin-top: 30px;">
<el-form-item class="edit-form-wrap">
<el-time-picker
v-model="formdata.starttime"
placeholder="起始时间"
:value-format="pickerFormatText"
:format="pickerFormatText"
:picker-options="{
selectableRange: '08:00:00 - 23:59:00',
format: pickerFormatText
}"
@change="changeTime"
>
</el-time-picker>
<span>-</span>
<el-time-picker
v-model="formdata.endtime"
placeholder="结束时间"
:value-format="pickerFormatText"
:format="pickerFormatText"
:picker-options="{
selectableRange: `${minPickerTime} - 23:59:00`,
format: pickerFormatText
}"
>
</el-time-picker>
</el-form-item>
</el-form>
data中的数据字段:
// form数据
formdata: {
starttime: '',
endtime: ''
},
minPickerTime: '08:00:00',
pickerFormatText: 'HH:mm'
methods方法:
changeTime(event) {
this.minPickerTime = `${event}:00`
},
效果: