el-date-picker设置显示上个月日期

要在el-date-picker中设置显示上个月的日期，可以在前端的created(){}中加入以下代码：

var date = new Date();
date.setMonth(date.getMonth() - 1);
let newDate = this.dateFormat(date);
this.filters.borrowMonth = newDate;

其中，this.filters.time是el-date-picker的v-model，即绑定值。不放在mounted(){}中，是因为created(){}会比mounted(){}更早渲染。dateFormat是自定义的日期格式化方法，不格式化的话，时间格式是Sat Oct 15 2022 15:51:51 GMT+0800 (中国标准时间)这种。padStart()方法用来不全长度。

相关问题

element-ui el-date-picker 如何设置 daterange 的日期格式

对于 element-ui 的 el-date-picker 组件来说，要设置 daterange 的日期格式，可以通过设置 picker-options 属性来实现。具体步骤如下：

1. 在 el-date-picker 组件上添加 picker-options 属性，值为一个对象。

<el-date-picker
  v-model="dateRange"
  type="daterange"
  :picker-options="pickerOptions"
></el-date-picker>

2. 在组件的 data 中定义 pickerOptions 对象，设置其属性 disabledDate 和 shortcuts。

data() {
  return {
    dateRange: [], // 存储选择的日期范围
    pickerOptions: {
      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]);
          }
        }
      ]
    }
  };
}

在以上代码中，disabledDate 函数用于自定义禁用日期的逻辑，可以根据需求进行修改。shortcuts 属性用于设置快捷选项，通过 onClick 函数设置快捷选项的点击事件逻辑。

通过以上步骤，即可设置 el-date-picker 组件的 daterange 的日期格式以及其他相关配置。

element-plus <el-date-picker禁用上上个月之前

Element Plus 的 `<el-date-picker>` 组件是一个日期选择器，提供了丰富的配置选项。如果你想禁用上上个月之前的日期，可以利用 `disabled-day` 或 `picker-options` 属性来实现这个功能。

使用 `disabled-day` 可以针对每一天手动控制是否可选，例如：

<template>
  <el-date-picker
    v-model="value"
    type="daterange"
    :disabled-day="disabledDay"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      disabledDay(date) {
        // 如果当前日期早于上上个月的第一天，则设为不可选
        const currentMonth = date.month;
        const lastLastMonthFirstDay = new Date();
        lastLastMonthFirstDay.setMonth(currentMonth - 2);
        lastLastMonthFirstDay.setDate(1);
        
        if (date.date < lastLastMonthFirstDay.getDate()) {
          return true; // 禁止选择
        }
        return false; // 允许选择
      },
    };
  },
};
</script>

这里通过计算当前月份减去两个月得到上上个月的第一天，然后判断输入日期是否在这之前，如果是就返回 `true` 来禁用该日期。

如果你想要基于固定的日期范围禁用，可以在 `picker-options` 中设置：

<template>
  <el-date-picker
    v-model="value"
    type="daterange"
    :picker-options="pickerOptions"
    ...
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      pickerOptions: {
        disabledDate: (currentDate) => {
          // 类似上面计算上上个月第一天的方式
          const lastLastMonthFirstDay = new Date();
          lastLastMonthFirstDay.setMonth(currentDate.month - 2);
          lastLastMonthFirstDay.setDate(1);

          return currentDate.getTime() < lastLastMonthFirstDay.getTime(); // 禁止选择
        },
      },
    };
  },
};
</script>