vue + element 日期范围选择器（ 日期不可选范围）切换日期格式

在业务中使用日期选择时，通常会遇到要限制日期范围的情况，这里不止需要日期范围还需要月份范围切换选择，我也是通过在网上寻找适合我项目的代码综合起来实现下面的结果：

 下面我们来实现结果中的代码

<el-form-item label="报表日期维度：" style="margin-right: 15%;">
          <el-radio-group v-model="radioTreaty" @change="changeHandler">
            <el-radio label="1">月度</el-radio>
            <el-radio label="2">日度</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="radioTreaty == '1'" label="下单时间：">
          <el-date-picker
            v-model="monthrange"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            :picker-options="monOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item v-show="radioTreaty == '2'" label="下单时间：">
          <el-date-picker
            v-model="daterange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>

 下面的DF 是我设置的日期显示格式 "YYYY-MM-DD"，from是我设置的开始时间，to是结束时间

data() {
    return {
      radioTreaty: "1",
      pickerOptions: {
// 设置的时间范围是30天，只能选择30天之内的数据
        disabledDate(time) {
          return (
            time.getTime() > Date.now() ||
            time.getTime() < Date.now() - 30 * 24 * 60 * 60 * 1000
          );
        },
      },
// 设置每年的开始到现在的月份
      monOptions: {
        disabledDate(date) {
          return (
            date.getTime() > Date.now() ||
            date.getTime() < new Date(new Date().getFullYear(), 0)
          );
        },
      },
      listLoading: false,
    };
  },
// 这里是接收页面时间选择和时间回显
  computed: {
    daterange: {
      get() {
        const { from, to } = this.filter;
        return [from, to];
      },
      set(val) {
        this.filter.from = moment(val[0]).format(DF);
        this.filter.to = moment(val[1]).format(DF);
      },
    },
    monthrange: {
      get() {
        const { from, to } = this.filter;
        return [from, to];
      },
      set(val) {
        this.filter.from = moment(val[0]).format(DF);
        this.filter.to = moment(val[1]).format(DF);
      },
    },
  },

下面是监听单选框选中变化，根据选择的不同，设置不同的时间值

methods: {
    changeHandler(value) {
      if (value === "2") {
        this.filter.from = moment().subtract(29, "days").format(DF);
        this.filter.to = moment().format(DF);
      } else {
        this.filter.from = moment(new Date(new Date().getFullYear(), 0)).format(DF);
        this.filter.to = moment().format(DF);
      }
    },
  },