1. 程式人生 > 其它 >elementUI日期元件限制日期範圍

elementUI日期元件限制日期範圍

限制區間30天:

      pickerMinDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) this.pickerMinDate = ''
        },
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const one 
= 30 * 24 * 3600 * 1000 const minTime = this.pickerMinDate - one const maxTime = this.pickerMinDate + one return time.getTime() < minTime || time.getTime() > maxTime } } }

限制區間30天,不能大於今日:

      pickerMinDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) 
=> { this.pickerMinDate = minDate.getTime() if (maxDate) this.pickerMinDate = '' }, disabledDate: (time) => { if (this.pickerMinDate !== '') { const one = 30 * 24 * 3600 * 1000 let minTime = this.pickerMinDate - one let maxTime
= this.pickerMinDate + one if (maxTime > new Date()) maxTime = new Date() // 限制不能選擇今天之後的日期 return time.getTime() < minTime || time.getTime() > maxTime } return time.getTime() > Date.now() } }

限制區間30天,不能小於今日:

      pickerMinDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) this.pickerMinDate = ''
        },
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            let minTime = this.pickerMinDate - one
            let maxTime = this.pickerMinDate + one
            if (minTime < new Date()) minTime = new Date() // 限制不能選擇今天之前的日期
            return time.getTime() < minTime || time.getTime() > maxTime
          }
          return time.getTime() < Date.now() - 8.64e7 // 加上 - 8.64e7 就可以選擇今天
        }
      }

選擇今天及之前的日期:

選擇今天及之後的日期:

結束日期不能大於開始日期: