element-ui时间组件同一个月内选择/30天内选择
同一个月
vue
复制代码
<el-date-picker v-model="time" type="datetimerange"
range-separator="至" start-placeholder="开始时间"
value-format="timestamp" :picker-options="pickerOptions"
end-placeholder="结束时间" @change="bizPayLog(1)">
</el-date-picker>
//写在data return
selectData:'',
//日期选择范围在一个月内
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.selectData = minDate.getTime()
if (maxDate) {
// 选择了最大日期后，清除已选日期，解除限制。
this.selectData = ''
}
},
disabledDate: (time) => {
// 是否禁用日期选择
if (this.selectData) {
let date = new Date(this.selectData)
// true：不可以选择该日期；false：可以选择该日期。
// 大于或者小于本月的日期被禁用
return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
} else {
return false;
}
}
},
30天以内
vue
复制代码
pickerMinDate:'',
//日期选择范围在一个月内
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
console.log(this.pickerMinDate,'this.pickerMinDate')
this.pickerMinDate = minDate.getTime();
if (maxDate) {
this.pickerMinDate = '';
}
},
disabledDate: time => {
console.log(this.pickerMinDate,'this.pickerMinDate1')
if (this.pickerMinDate !== "") {
const day30 = (31 - 1) * 24 * 3600 * 1000;
// 只选后30天，minTime不用加day30,只选前30天，maxTime不用加day30
let maxTime = this.pickerMinDate + day30;
let minTime = this.pickerMinDate - day30;
if (maxTime > new Date()) {
maxTime = new Date();
}
return time.getTime() > maxTime || time.getTime() < minTime;
}
return time.getTime() > Date.now();
}
},