兩種常用寫法：

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="選擇結(jié)束日期" 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()//開始時間不選時，結(jié)束時間最大值小于等于當(dāng)天 }}},processDate(){//提出結(jié)束時間必須大于提出開始時間let self = thisreturn {disabledDate(time){if(self.seachObj.beginTime){return new Date(self.seachObj.beginTime).getTime() > time.getTime()}else{return time.getTime() > Date.now()//開始時間不選時，結(jié)束時間最大值小于等于當(dāng)天 }}}},}

?

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：設(shè)置下拉框時間列表格式；

value-format：設(shè)置返回值格式

picker-options：設(shè)置selectableRange實現(xiàn)選擇范圍的確定，此處動態(tài)設(shè)需要拼接“秒”的值

效果圖：

開始時間

?

結(jié)束時間

?

轉(zhuǎn)載于:https://www.cnblogs.com/wangking/p/10944099.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。