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

        }
      }

el-date-picker是Element UI库中的日期选择器组件,它允许用户选择日期并支持设置日期范围。关于时间限制el-date-picker本身并不直接提供对特定时间段的硬性限制,如只允许选择某个小时段内的日期。但是,你可以通过一些自定义策略或者结合其他JavaScript方法来实现这个功能。 例如,你可以在`pick()`方法的回调函数中检查选定的时间是否符合要求,如果不符合则手动改变选中的值。下面是一个简化的例子: ```javascript <template> <el-date-picker v-model="dateRange" type="daterange" range-separator="至" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" @change="handleDateChange"></el-date-picker> </template> <script> export default { data() { return { dateRange: ['', ''], startPlaceholder: '开始日期', endPlaceholder: '结束日期' }; }, methods: { handleDateChange(date) { const startDate = date.start; const endDate = date.end; // 检查时间限制(比如08:00 - 17:00) if (startDate.getHours() > 17 || startDate.getHours() < 8 || endDate.getHours() > 17 || endDate.getHours() < 8) { // 如果不符合,手动调整到限制范围内 let newStartDate = new Date(startDate); newStartDate.setHours(8, 0, 0); // 设定为早上8点 let newEndDate = new Date(endDate); newEndDate.setHours(17, 0, 0); // 设定为下午5点 this.dateRange[0] = newStartDate.format('yyyy-MM-dd HH:mm'); this.dateRange[1] = newEndDate.format('yyyy-MM-dd HH:mm'); } } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值