el-date-picker使用日期范围或日期时间范围时,经常需要限制选择的范围跨度。比如时间跨度不超过三个月,且不能超过当前时间。在picker-options里手动去写会比较麻烦,这里推荐使用momentjs。 步骤:
npm install moment --save
// 在main.js中挂在到Vue的原型上,这样在组件中就能通过this.$moment来使用
import moment from "moment"
Vue.prototype.$moment = moment;
贴出picker-options的值
pickerMinDate: '',
pickerOptions: {
onPick: ({ minDate, maxDate }) => {
this.pickerMinDate = minDate
if (maxDate) {
this.pickerMinDate = ''
}
},
disabledDate: time => {
if (this.pickerMinDate) {
// this.$moment(this.pickerMinDate).add(3, 'month')是指定时间往后3个月,format('x')是转为毫秒的时间戳。
let allowMaxTime = this.$moment(this.pickerMinDate).add(3, 'month').format('x')
// this.$moment(this.pickerMinDate).subtract(3, 'month')是指定时间往前3个月
let allowMinTime = this.$moment(this.pickerMinDate).subtract(3, 'month').format('x')
let currentTime = time.getTime()
return currentTime > allowMaxTime || currentTime < allowMinTime || currentTime > Date.now()
} else {
return time.getTime() > Date.now()
}
}
},