官方文檔

https://element.eleme.cn/#/zh-CN/component/datetime-picker

問題分析

el-date-picker組件需要 :picker-options屬性，屬性值為data,data的數(shù)據(jù)來自于methods中的方法。

主要涉及對disabledDate參數(shù)的設(shè)置。?

解決方案

<el-form-item label="開始時間" prop="startTime" ><el-date-picker v-model="form.startTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%":picker-options="startDatePicker" :disabled="dialogStatus=='view'" type="datetime" :placeholder="dialogStatus=='view'?'':'請輸入訂閱開始時間'"></el-date-picker> </el-form-item> <el-form-item label="結(jié)束時間" prop="endTime"><el-date-picker v-model="form.endTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%":picker-options="endDatePicker" :disabled="dialogStatus=='view'" type="datetime" :placeholder="dialogStatus=='view'?'':'請輸入訂閱結(jié)束時間'"></el-date-picker> </el-form-item> data() {return {startDatePicker: this.beginDate(),endDatePicker: this.processDate(),} } beginDate(){const self = thisreturn {disabledDate(time){if (self.form.endTime) { //如果結(jié)束時間不為空，則小于結(jié)束時間return new Date(self.form.endTime).getTime() < time.getTime()} else {// return time.getTime() > Date.now()//開始時間不選時，結(jié)束時間最大值小于等于當(dāng)天}}} }, processDate() {const self = thisreturn {disabledDate(time) {if (self.form.startTime) { //如果開始時間不為空，則結(jié)束時間大于開始時間return new Date(self.form.startTime).getTime() > time.getTime()} else {// return time.getTime() > Date.now()//開始時間不選時，結(jié)束時間最大值小于等于當(dāng)天}}} }

擴展方案

1、只可以選擇今天以及今天以后的時間：

pickerOptions0: {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7;//8.64e7=1000*60*60*24一天} },

2、?只可以選擇今天以及今天以后十天之內(nèi)的時間：

pickerOptions: {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 10 * 8.64e7;//8.64e7=1000*60*60*24一天}},

?

3、?如果開始時間不為空，則結(jié)束時間大于開始時間,且大于當(dāng)前時間

processDate() {const self = thisreturn {disabledDate(time) {if (self.form.beginTime) { //如果開始時間不為空，則結(jié)束時間大于開始時間,且大于當(dāng)前時間return new Date(self.form.beginTime).getTime() > time.getTime() || time.getTime() < Date.now() - 1000*3600*24} else {return time.getTime() < Date.now() - 1000*3600*24//開始時間不選時，結(jié)束時間最大值大于等于當(dāng)天}}} },

?

參考文章

elementUI 日期時間選擇器el-date-picker開始時間與結(jié)束時間約束

總結(jié)

以上是生活随笔為你收集整理的Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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