el-date-picker日期的限制

 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])

12、限制可以选择到明天,但不能选择后天以外的未来日期

     pickerOptions1: {
        disabledDate(time) {
          const maxToday = new Date()
          maxToday.setDate(maxToday.getDate() + 1)
          maxToday.setHours(23, 59, 59, 999)
          return time.getTime() > maxToday.getTime()
        }
      },

13、限制不能选择今天及未来日期

      pickerOptions: {
        disabledDate(time) {
          const maxToday = new Date()
          maxToday.setTime(maxToday.getTime() - 24 * 60 * 60 * 1000)
          maxToday.setHours(23, 59, 59, 999)
          return time.getTime() > maxToday.getTime()
        }
      }

14、限制最早日期只能选择2024-01-01

      pickerOptions: {
        disabledDate(time) {
    const maxToday = new Date()
    maxToday.value.setHours(23, 59, 59, 999)
    const targetDate = new Date('2023-12-31')
    return time.getTime() > maxToday.getTime() || time.getTime() < targetDate.getTime()

        }
      }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值