el-date-picker限定时间范围

1,148 阅读1分钟

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()
      }
    }
  },