场景
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
注意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加一天是让当天可选。
