兩種常用寫法：

1.提出日期：

<el-date-picker type="date" placeholder="選擇開始日期" v-model="seachObj.beginTime" style="width: 40%;" :picker-options="startDatePicker" @change="dateChangeBeginTime"></el-date-picker> 至 <el-date-picker type="date" placeholder="選擇結束日期" v-model="seachObj.endTime" style="width: 40%;" :picker-options="endDatePicker" @change="dateChangeEndTime"></el-date-picker> data(){startDatePicker:this.beginDate(),endDatePicker:this.processDate(), },methods:{beginDate(){//提出開始時間必須小于今天let self = thisreturn {disabledDate(time){return time.getTime() > Date.now()//開始時間不選時，結束時間最大值小于等于當天 }}},processDate(){//提出結束時間必須大于提出開始時間let self = thisreturn {disabledDate(time){if(self.seachObj.beginTime){return new Date(self.seachObj.beginTime).getTime() > time.getTime()}else{return time.getTime() > Date.now()//開始時間不選時，結束時間最大值小于等于當天 }}}},}

?

2.提出日期：

<el-time-pickerv-model="addbuyForm.preClockOffTime"class="date-box"format="HH:mm"value-format="HH:mm":picker-options="{selectableRange:`00:00:00 -${addbuyForm.nextClockInTime ? addbuyForm.nextClockInTime+':00' : '23:59:00'}`}"></el-time-picker><el-time-pickerv-model="addbuyForm.nextClockInTime"format="HH:mm"value-format="HH:mm":picker-options="{selectableRange: `${addbuyForm.preClockOffTime ? addbuyForm.preClockOffTime+':00' : '00:00:00'}-23:59:00`}"></el-time-picker>

format：設置下拉框時間列表格式；

value-format：設置返回值格式

picker-options：設置selectableRange實現選擇范圍的確定，此處動態設需要拼接“秒”的值

效果圖：

開始時間

?

結束時間

?

轉載于:https://www.cnblogs.com/wangking/p/10944099.html

總結

以上是生活随笔為你收集整理的ElementUI el-time-picker-只显示小时、分钟，分并添加范围校验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。