vue项目，el-date-picker日期组件默认显示当前日期前一周,未来日期不可选择设置

应项目需求要分别设置开始日期和结束日期，且未来日期不可选择，实现代码如下：

1.template内容

    <el-row style="margin: 20px 0px">
        <el-date-picker v-model="startValue" type="datetime" 
        :picker-options="pickerOptions" placeholder="请选择开始时间">
        </el-date-picker>
        <el-date-picker v-model="endValue" type="datetime" 
        :picker-options="pickerOptions" placeholder="请选择截止时间">
        </el-date-picker>
        <el-button type="primary" @click="get(); getWeek();getUsageRate()">
        获取数据
        </el-button>
    </el-row>

2.script内容

<script>
export default {
    data() {
        return {
          startValue: this.setDateTime(this.subtractDays(new Date(), 7), 0, 0, 0),//默认日期
          endValue: this.setDateTime(this.subtractDays(new Date(), 1), 23, 59, 59),//前六天
          //禁止选择未来日期
          pickerOptions: {
              disabledDate(time) {
                  return time.getTime() > Date.now();
              },
          },
       }
    },
    methods: {
        subtractDays(date, days) {
          // 返回给定日期的前几天的日期
          const result = new Date(date.getTime());
          result.setDate(result.getDate() - days);
          return result;
        },
        setDateTime(date, hours, minutes, seconds) {
          // 设置日期对象的小时、分钟和秒
          date.setHours(hours, minutes, seconds, 0); // 设置秒和毫秒为0
          return date;
        }

    }

}
    

3.实现效果是这样

问题总结，欢迎交流