el-date-picker日期的限制

班景龙
2023-12-01

 1、限制不能选择未来日期

          <el-date-picker
            v-model="dates"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions1"
          />
      pickerOptions1: {
        disabledDate(time) {
          const maxToday = new Date()
          maxToday.setHours(23, 59, 59, 999)
          return time.getTime() > maxToday.getTime()
        }
      },

2、引入

import date from 'element-ui/lib/utils/date'

3、近一周内

          const D = new Date()
          D.setTime(D.getTime() - 3600 * 1000 * 24 * 1)
          const endDate = date.format(D, 'yyyy-MM-dd' + ' 23:59:59')
          D.setTime(D.getTime() - 3600 * 1000 * 24 * 7)
          const startDate = date.format(D, 'yyyy-MM-dd' + ' 00:00:00')
          this.dates = []
          this.dates.push(startDate)
          this.dates.push(endDate)

4、选择当天(年月日时分秒)

      const now = new Date()
      now.setHours(0, 0, 0, 0)
      this.date.push(date.format(now, 'yyyy-MM-dd HH:mm:ss'))
      now.setHours(23, 59, 59, 999)
      this.date.push(date.format(now, 'yyyy-MM-dd HH:mm:ss'))

5、选择当天(年月日)

        const now = new Date()
        this.contrastDate = date.format(now, 'yyyy-MM-dd')

6、当天日期减一天比如(2022-09-27)则获取到的时间是(2022-09-26)

       var dateTime = new Date('2022-10-1');
          dateTime = dateTime.setDate(dateTime.getDate() - 1);
          dateTime = new Date(dateTime);
          console.log(dateTime);
          console.log(dateFormat(dateTime));

        function dateFormat(dateData) {
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? ('0' + m) : m
            var d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            const time = y + '-' + m + '-' + d
            return time
        }

7、今天和昨天

      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24)
      const startDate = start ? date.format(start, 'yyyy-MM-dd') : ''
      const endDate = end ? date.format(end, 'yyyy-MM-dd') : ''
      this.dates = [startDate, endDate]

8、设置只能选择三月以内

      pickerOptions0: {
        disabledDate(time) {
          const now = new Date()
          // now.setTime(now.getTime() - 3600 * 1000 * 24)
          const curDate = new Date().getTime()
          const three = 90 * 24 * 3600 * 1000
          const threeMonths = curDate - three
          return time.getTime() > now || time.getTime() < threeMonths
        }
      },

9、限制只能选择近三个月且选择的范围只能是一个月内

      pickerOptions0: {
        // 设置不能选择的日期
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime()
          if (maxDate) {
            this.choiceDate = ''
          }
        },
        disabledDate: (time) => {
          const choiceDateTime = new Date(this.choiceDate).getTime()
          const minTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() - 1)
          const maxTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() + 1)
          const min = minTime
          const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
          const max = newDate < maxTime ? newDate : maxTime
          const now = new Date()
          now.setHours(23, 59, 59, 999)
          const curDate = new Date().getTime()
          const three = 90 * 24 * 3600 * 1000
          const threeMonths = curDate - three
          if (this.choiceDate) {
            return time.getTime() < min || time.getTime() > max || time.getTime() > now || time.getTime() < threeMonths
          }
          return time.getTime() > now || time.getTime() < threeMonths
        }
      },

10、限制不能选择未来日期,且只能选择近一周的日期

      pickerOptions0: {
        // 设置不能选择的日期
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime()
          if (maxDate) {
            this.choiceDate = ''
          }
        },
        disabledDate: (time) => {
          const choiceDateTime = new Date(this.choiceDate).getTime()
          const minTime = new Date(choiceDateTime).setDate(new Date(choiceDateTime).getDate() - 6)
          const maxTime = new Date(choiceDateTime).setDate(new Date(choiceDateTime).getDate() + 6)
          const min = minTime
          const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
          const max = newDate < maxTime ? newDate : maxTime
          const now = new Date()
          now.setHours(23, 59, 59, 999)
          if (this.choiceDate) {
            return time.getTime() < min || time.getTime() > max || time.getTime() > now
          }
          return time.getTime() > now
        }
      }

11、设置默认日期是当天

import dayjs from 'dayjs'        
const date = [dayjs().format('YYYY-MM-DD 00:00:00'), 
              dayjs().format('YYYY-MM-DD 23:59:59')]
        this.importTime.push(date[0])
        this.importTime.push(date[1])

 

 

 类似资料: