elementui日期选择，如何设置当天后的日期不能被点击；及默认展示日期效果

本文链接：https://blog.youkuaiyun.com/qq_25635139/article/details/88597263

本文介绍如何使用ElementUI设置日期选择器，使其仅允许选择当天及之前的日期，并展示了默认显示当天日期的方法。通过在`created`钩子中调用自定义方法，可以实现页面加载时显示当前日期前七天的效果。同时，提供了`@change`事件监听选择的时间范围，以更新搜索条件。

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

<div class="block" size="small">
                    <el-date-picker
                        v-model="value7"
                        type="daterange"
                        align="left"
                        format="yyyy/MM/dd"
                        size="small"
                        unlink-panels                        
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions2">                        
                    </el-date-picker>
                </div>
首先你得把这段代码复制到你的html中

然后再导入这段代码
  pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now();   这里就是设置当天后的日期不能被点击
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近二个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value6: "",
      //   value7:""
      value7: []
    };

然后再methods中写一个以下的方法在created中调用该方法

startTime() {
      let now = new Date();
      let startDate = new Date(
        Date.UTC(now.getFullYear(), now.getMonth(), now.getDate() - 7)
      )
        .toISOString()
        .slice(0, 10);

      let endDate = new Date(
        Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
      )
        .toISOString()
        .slice(0, 10);

      this.value7 = [];
      this.value7.push(startDate);
      this.value7.push(endDate);
    },

这样就完成了，这样的效果，网页一打开默认显示当天日期的前七天，如果想要设置更久，在方法中也可以改，相信你可以找到在哪里改的

添加属性@change="chooseTimeRange"，在methods中获取选中时间

------------------------------------------------------------------

chooseTimeRange(t) {

var date = new Date(t[0]);

var YMDbegin = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();//配置开始时间

var date1 = new Date(t[1]);

var YMDend = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();//结束时间

this.searchMap.beginTime = YMDbegin;

this.searchMap.endTime = YMDend;

--------------------------------------------------------------------做成通用方法

export function timestampToTime(timestamp,state) {
    var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1).padStart(2,0) + '-';
    var D = date.getDate().padStart(2,0)+ ' ';
    var h = date.getHours().padStart(2,0)+ ':';
    var m = date.getMinutes.padStart(2,0)+ ':';
    var  s = date.getSeconds().padStart(2,0);
    return state?Y+M+D+h+m+s:Y+M+D;
  }