場景

DateTimePicker是ElementUI的日期和時間共存的選擇器。

有時需要限制選擇器的選擇范圍。

效果

實現

實現需要使用組件的picker-option屬性，具體參照官方文檔：

http://element-cn.eleme.io/#/zh-CN/component/datetime-picker#datetimepicker-ri-qi-shi-jian-xuan-ze-qi

picker-option是object類型。

Picker Options

?

參數說明類型可選值默認值

shortcuts	設置快捷選項，需要傳入 { text, onClick } 對象用法參考 demo 或下表	Object[]	—	—
disabledDate	設置禁用狀態，參數為當前日期，要求返回 Boolean	Function	—	—
firstDayOfWeek	周起始日	Number	1 到 7	7

注意disabledDate這個參數的使用，參數為當前日期，要求返回是Boolean，類型是Function。

舉例

添加驗證規則

控件顯示：

<el-form-item label="支付截止日期:" prop="finalPayTime"><el-date-pickerv-model="demandBid.finalPayTime" format="yyyy-MM-dd HH:mm"type="datetime"placeholder="支付截止日期" :picker-options="pickerOptions5"> </el-date-picker>

其中:picker-options="pickerOptions5" 所以在return中添加：

?pickerOptions5: {},

注意prop屬性是 finalPayTime

在rules中添加驗證規則：

? rules: {finalPayTime: [{required: true, message: '請選擇支付截止日期'},{validator: checkFinalPayTime, trigger: 'blur' }],

執行驗證方法:checkFinalPayTime

在data中聲明方法：

var checkFinalPayTime = (rule, value, callback) => {//var valueDate = moment(value).format('YYYY-MM-DD')if (new Date(value) > new Date(this.demandBid.goUpTime)) {return callback(new Error('支付截止日期必須早于去程起飛時間'));}else if(new Date(value) <new Date()){return callback(new Error('選擇的支付截止日期無效'));}else{callback();}};

限制選擇范圍

在此頁面的created方法中執行初始化時間控件的操作，即在加載完后就執行相應的方法。

export default {created() {this.initDateTimePicker(demandObj);},

如果有多個日期選擇空間，則在initDateTimePicke方法中依次聲明

?methods: {/*** 初始化日期控件配置* */initDateTimePicker(demandObj) {this.initGoUpTime(demandObj);this.initGoDownTime(demandObj);this.initReturnUpTime(demandObj);this.initReturnDownTime(demandObj);this.initFinalPayTime(demandObj);this.initFinalOutTicketTime(demandObj);},

這里以 this.initFinalPayTime(demandObj);為例

?/*** 支付截止日期控件配置* @param demandObj*/initFinalPayTime(demandObj) {this.pickerOptions5 = Object.assign({}, this.pickerOptions5, {disabledDate: (time) => {if (demandObj.goStartTime != null && demandObj.goStartTime != undefined && demandObj.goStartTime != '') {if ( new Date(demandObj.goStartTime).getTime() > Date.now()) {return new Date(demandObj.goStartTime).getTime() < time.getTime() ||?? new Date() > time.getTime() + 3600 * 1000 * 24;} else {return new Date() > time.getTime() + 3600 * 1000 * 24}} else {return new Date() > time.getTime() + 3600 * 1000 * 24}}})},

注意：

比較時間時要用getTime()來獲取毫秒數比較。

要將字符床時間放在new Date()去轉換為時間格式。

注意disabledDate返回是Boolean,即要選擇當前時間之后，就要小于當前時間而不是大于。

在 time.getTime() + 3600 * 1000 * 24加一天是讓當天可選。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的ElementUI的DateTimePicker组件添加验证规则以及限制选择范围的全部內容，希望文章能夠幫你解決所遇到的問題。

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