ElementUI el-date-picker 限制选中日期前后30天，大于当天不可选_element-ui el-date-picker 大于今天的日期,不让选择-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43764814/article/details/110672210

本文介绍如何在ElementUI的el-date-picker组件中，限制用户只能选择当前日期前后30天内的日期，并禁止选取大于当天的日期。通过对日期选择器的配置，实现特定日期范围的筛选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <el-date-picker v-model="date" 
    type="daterange" 
     range-separator="—" align="right" 
     start-placeholder="开始日期" 
     end-placeholder="结束日期" 
     value-format="yyyy-MM-dd"
     :picker-options="pickerOptions"
      @change="onChangeDate">
    </el-date-picker> 
  </template>

  <script>
  export default {
      data() {
          return {
              pickerMinDate:'',
              date:[],
              pickerOptions:{
                  onPick: (obj) => {
                      this.pickerMinDate = new Date(obj.minDate).getTime();
                  },
                  disabledDate:(time)=> {
                      if (this.pickerMinDate) {
                          const day1 =  30 * 24 * 3600 * 1000
                          let maxTime = this.pickerMinDate + day1
                          let minTime = this.pickerMinDate - day1
                          return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()-1 * 24 * 3600 * 1000
                      }else{
                          return time.getTime() > Date.now()+0 * 24 * 3600 * 1000
                      }
                  }
              }
          };
      },
      created() {
          this.getSelectList();
      },
      computed: {
      },
      methods: {
        onChangeDate(val) {
               this.params.StartDate = val[0];
               this.params.EndDate = val[1];
              if (val) {
                  this.params.StartDate = val[0];
                  this.params.EndDate = val[1];
              } else {
                  let StartDate = this.$FormatTime("YYYY-mm-dd",new Date());
                  let EndTime = this.$FormatTime("YYYY-mm-dd",new Date());
                  let list =  EndTime.split('-');
                  let EndDate = JSON.stringify((JSON.parse(list[0])+1))+'-'+list[1]+'-'+list[2];
                  this.params.StartDate = StartDate;
                  this.params.EndDate = EndDate;
              }
          }
      }
  };
  </script>

  <style lang="scss" scoped>
  </style>