el-date-picker日期选择最大跨度3个月且不能超过今日

在爱里落单

已于 2023-02-04 17:00:31 修改

阅读量1.1k

点赞数 3

文章标签： vue.js javascript 前端 Powered by 金山文档

于 2023-02-04 16:53:28 首次发布

本文链接：https://blog.csdn.net/m0_52965469/article/details/128883245

版权

文章展示了如何在Vue.js应用中使用ElementUI的日期选择器组件，设置日期范围不超过3个月，并且不能选择当前日期之后的日期。通过`:picker-options`属性和`disabledDate`函数实现动态限制。

摘要由CSDN通过智能技术生成

需求：选择跨度最多3个月，不能选择今日以后的日期

html

<html>
    <el-date-picker
      v-model="search_date"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
</html>

script

<script>
export default {
  data() {
    let _minDate = null
    return {
      search_date: '',
      pickerOptions: { 
        onPick({maxDate,minDate}){ //第一次点击判断
          if (minDate && _minDate) {
            _minDate = null;
          } else if (minDate) {
            _minDate = minDate.getTime();
          }
        },
        disabledDate(time) {
          let range = 90 * 24 * 3600 * 1000
          if (_minDate) {
            let maxDatePick = null
            let minPickDate = _minDate - range
            if(_minDate + range > Date.now() - 8.64e6){
              maxDatePick = Date.now() - 8.64e6
            }else{
              maxDatePick = _minDate + range
            }
            return time.getTime() > maxDatePick || time.getTime() < minPickDate;
          }else{
            return time.getTime() > Date.now() - 8.64e6;
          }
        }
      },
    }
  }
}
</script>

感谢支持