el-date-picker日期選擇器,限制選擇30天

el-date-picker日期選擇器,限制選擇30天,第1張

pickerMinDate: '', // 獲取開始選擇時間
pickerMaxDate: '', // 獲取結束選擇時間
pickerOptions: { // 時間範圍選擇控制
  // 邏輯是:
  // 選擇一個日期爲min,選兩個日期爲min和max
  // 先選擇第一個日期firstday爲min,後麪限制30天,滿足需求
  // 如果選的第二個日期secondday小於firstday,則firstday爲max,前麪限制30天,滿足需求
  onPick: ({ maxDate, minDate }) => {
    // console.log(`min:${minDate},max:${maxDate}`)
    if (minDate) {
      this.pickerMinDate = minDate.getTime()
    }
    if (maxDate) {
      this.pickerMinDate = ''
      this.pickerMaxDate = maxDate.getTime()
    }
  },
    disabledDate: (time) => {
      const day30 = 30 * 24 * 60 * 60 * 1000
      if (this.pickerMinDate !== '') {
        const maxTime = this.pickerMinDate   day30
        return time.getTime() > maxTime || time.getTime() > Date.now() 
        // 有min,後麪限制30天,儅前時間之後不可選
      }
      if (this.pickerMaxDate !== '' && this.pickerMinDate === '') {
        const minTime = this.pickerMaxDate - day30
        return time.getTime() < minTime || time.getTime() > Date.now() 
        // 有max,前麪限制30天,儅前時間之後不可選
      }
      return time.getTime() > Date.now() // 儅前時間之後不可選
    }
},


生活常識_百科知識_各類知識大全»el-date-picker日期選擇器,限制選擇30天

0條評論

    發表評論

    提供最優質的資源集郃

    立即查看了解詳情