el-date-picker 日期选择限制

最新推荐文章于 2024-07-30 15:37:39 发布

下一站丶

最新推荐文章于 2024-07-30 15:37:39 发布

阅读量753

点赞数 6

分类专栏： element-ui 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq2754289818/article/details/135250879

版权

element-ui 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章讲述了如何在ElementUI的el-date-picker组件中设置日期选择器的31天限制，并提供了一个方法获取并预设默认为最近一周的日期范围。重点在于`disabledDate`函数的实现和日期范围的控制。

摘要由CSDN通过智能技术生成

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);
    },