elementUI 日期时间选择器el-date-picker开始时间与结束时间约束

主要思路:
el-date-picker组件需要 :picker-options属性,属性值为data,data的数据来自于methods中的方法。


##template代码


:picker-options="startDatePicker" :disabled="dialogStatus=='view'" type="datetime" :placeholder="dialogStatus=='view'?'':'请输入订阅开始时间'">


:picker-options="endDatePicker" :disabled="dialogStatus=='view'" type="datetime" :placeholder="dialogStatus=='view'?'':'请输入订阅结束时间'">


##data数据
data() {
return {
startDatePicker: this.beginDate(),
endDatePicker: this.processDate(),
  }
}

##methods方法

elementUI 日期时间选择器el-date-picker开始时间与结束时间约束_第1张图片

beginDate(){
const self = this
return {
disabledDate(time){
if (self.form.endTime) { //如果结束时间不为空,则小于结束时间
return new Date(self.form.endTime).getTime() < time.getTime()
} else {
// return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
}
}
}
},
processDate() {
const self = this
return {
disabledDate(time) {
if (self.form.startTime) { //如果开始时间不为空,则结束时间大于开始时间
return new Date(self.form.startTime).getTime() > time.getTime()
} else {
// return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
}
}
}
}

附加:
只可以选择今天以及今天以后的时间:

elementUI 日期时间选择器el-date-picker开始时间与结束时间约束_第2张图片

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

 

 
   

 

 
  

转载于:https://www.cnblogs.com/luoxuemei/p/9667652.html

你可能感兴趣的:(elementUI 日期时间选择器el-date-picker开始时间与结束时间约束)