el-date-picker 日期选择限制

2023-12-28 00:20:51

el-date-picker 日期选择限制

场景： 选择时间的区间是31天，默认显示最近一周的数据

代码：

<el-date-picker  v-model="due_date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
 :picker-options="endDatePicker" value-format="yyyy-MM-dd" @change="dateChangeFun"
 :default-value="personForm.due_date" :clearable="false">
 </el-date-picker>

重点代码 限制只能选择31天

endDatePicker: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = 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()
            );
          } else {
            return time.getTime() > Date.now();
          }
        },
      },

获取最近7天的日期

timeFun() {
      let year = dayjs().year();
      let month = dayjs().month() + 1;
      let day = dayjs().date() - 8;
      let lastDay = dayjs().date() - 1;
      let nowYear = year + "-" + month + "-" + lastDay;
      let lastYear = year + "-" + month + "-" + day;
      let a = dayjs(lastYear).format("YYYY-MM-DD");
      let arr = [];
      arr.push(a, nowYear);
      this.$set(this.personForm, "due_date", arr);
    },

文章来源:https://blog.csdn.net/qq2754289818/article/details/135250879
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。