el-date-picker限制开始时间不能大于结束时间,且结束不能小于开始时间

<div class="des-status-df">开始</div>
    <div class="block">
                <el-date-picker
                 :picker-options="startDatePicker"
                  v-model="startTime"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </div>
              <div class="des-status-df">结束</div>
              <div class="block">
                <el-date-picker
                 :picker-options="endDatePicker"
                  v-model="endTime"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
     </div>

beginDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.endTime) {
            //如果结束时间不为空,则小于结束时间
            return new Date(self.endTime).getTime() < time.getTime();
          } else {
            // return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
          }
        },
      };
    },
    processDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.startTime) {
            //如果开始时间不为空,则结束时间大于开始时间
            return new Date(self.startTime).getTime() > time.getTime();
          } else {
            // return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
          }
        },
      };
    },

data:

startDatePicker: this.beginDate(),
endDatePicker: this.processDate(),

版本二: 使用于yyyy-MM-dd HH:mm:ss模式

import Dayjs from 'dayjs'

// :rules="filter_rules({ required: true })" 我司内部写法,可忽略。validator参照饿了么文档写法即可
          <el-form-item label="开始时间:" prop="startTime" :rules="filter_rules({ required: true })">
            <el-date-picker
              v-model="formData.startTime"
              type="datetime"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              :picker-options="startDatePicker"
              style="width: 100%"
            />
          </el-form-item>

data() {
    const validator = (rule, value, callback) => {
      const { startTime, endTime } = this.formData
      if (Dayjs(endTime).valueOf() < Dayjs(startTime).valueOf()) {
        return callback(new Error('结束时间不能早于开始时间'))
      }
      callback()
    }
    return {
        formData: {
          startTime: '',
          endTime: ''
        },
        startDatePicker: this.beginDate(),
        endDatePicker: this.processDate(),
        rules: {
          required: true, 
          validator: validator
        }
    }
}
 // 这里面的方法可提取出来,单独放在utils文件里面做全局使用    

beginDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.formData.endTime) {
            return self.startTimeControl(time, self.formData)
          }
        }
      }
    },
    processDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.formData.startTime) {
            return self.endTimeControl(time, self.formData)
          }
        }
      }
    },
    startTimeControl(time, formData) {
      const times = this.getDateTime(time)
      const { endTime } = formData
      const endTimes = this.getDateTime(endTime)
      const nowTime = new Date().getTime() - 24 * 60 * 60 * 1000
      if (endTime) {
        // 结束日期要在选择的开始日期之后,小于开始时间的日期不能选
        return times > endTimes || times < nowTime
      }
      return times < nowTime
    },
    endTimeControl(time, formData) {
      const times = this.getDateTime(time)
      const { startTime } = formData
      const startTimes = this.getDateTime(startTime)
      if (startTime) {
        return (
        // 结束日期要在选择的开始日期之后,小于开始时间的日期不能选
          times < startTimes
        )
      }
    },
    getDateTime(time) {
      time = this.formatTimeToStr(time, 'yyyy-MM-dd')
      return new Date(time?.substr(0, 10)).getTime()
    },
    formatTimeToStr(times, pattern) {
      let d = new Date(times).Format('yyyy-MM-dd HH:mm:ss')
      if (pattern) {
        d = new Date(times).Format(pattern)
      }
      return d.toLocaleString()
    }

### el-date-picker 限制选择时间范围 #### 方法一:通过 `picker-options` 属性 为了限制日期选择器的选择范围,可以利用 `picker-options` 属性。此属性允许设定一系列选项来控制可用的日期区间。例如,如果希望限定用户所选日期不超过当前月份,则可以在 `picker-options` 中配置相应参数[^1]。 ```html <template> <div> <el-date-picker v-model="date" type="date" :picker-options="pickerOptions"> </el-date-picker> </div> </template> <script> export default { data() { return { date: '', pickerOptions: { disabledDate(time) { const oneMonthLater = new Date(); oneMonthLater.setMonth(oneMonthLater.getMonth() + 1); return time.getTime() > oneMonthLater; } } }; } }; </script> ``` 上述代码展示了如何防止用户选取超出一个月后的日期。 #### 方法二:使用 `disabledDate` 函数 另一种方式是直接应用 `disabledDate` 属性并传入一个回调函数。该函数接收待判断的有效性的日期对象作为输入,并返回布尔值决定是否禁用特定日期。比如要让用户仅能挑选最近三天内的日子加上当天的话,就可以这样写: ```html <template> <div> <el-date-picker v-model="selectedDate" type="datetime" :disabled-date="disablePastThreeDaysAndFutureDates"> </el-date-picker> </div> </template> <script> export default { data() { return { selectedDate: '' }; }, methods: { disablePastThreeDaysAndFutureDates(date) { let now = new Date().getTime(); // 获取今天的毫秒数 let threeDaysAgo = now - (3 * 24 * 60 * 60 * 1000); // 计算三天前的时间戳 // 如果给定日期小于等于三天前 或者 大于今天则不可选 return date && (date.valueOf() <= threeDaysAgo || date.valueOf() >= now); } } }; </script> ``` 这段脚本实现了只允许选择过去72小时内以及今日的日期的功能[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值