需求要求日期只能选择7天,无明确需求,然后用了两种方式实现

1.直接限制日期上只有7天可以选择,在根据选择的结束时间来,更新可以选择的日期,这样虽然实现了需求,但是用户体验不好

        //只能选择结束日期的7天
 beforePickerOptions: {
        disabledDate: time => {
            if (this.end) {
              let preSevenDay =
                new Date(this.end).getTime() - 3600 * 24 * 7 * 1000;
              return (
                time.getTime() < preSevenDay ||
                time.getTime() > new Date(this.end) - 3600 * 1000
              );
            } else {
          return time.getTime() > new Date(this.end) - 3600 * 1000;
          }
        }
      },
   billPickerOptions: {
        disabledDate: time => {
            if (this.start) {
              let preSevenDay =
                new Date(this.start).getTime() + 3600 * 24 * 6 * 1000;
              return (
                time.getTime() > preSevenDay ||
                time.getTime() < new Date(this.start) - 3600 * 1000 * 24
              );
            } else {
          return time.getTime() > new Date() - 3600 * 1000;
            }
        }
      }

2.第二种推荐用户可以自由选择日期,小于7天的不进行计算,只计算大于7天的时候

       <el-date-picker
            size="small"
            v-model="start"
            type="date"
            placeholder="年/月/日"
            value-format="yyyy-MM-dd"
            :clearable="false"
            @change="
              val => {
                echartChange(val, 1);
              }
              "
            :picker-options="beforePickerOptions"
          >
            <i slot="prefix" class="el-input__icon el-icon-date"></i>
          </el-date-picker>
      beforePickerOptions: {
        disabledDate: time => {
    return time.getTime() > new Date(this.end) - 3600 * 1000;
        }
      },
     //结束日期需要绑订的
      billPickerOptions: {
        disabledDate: time => {
       return time.getTime() > new Date() - 3600 * 1000;
        }
      }
//下面是方法处理
   echartChange(val, num) {
      //开始日期
      if (num == 1) {
        //如果选择的日期大于结束日期加7,就重新计算结束日期
        if (
          new Date(this.start).getTime() <
          new Date(this.end).getTime() - 3600 * 24 * 6 * 1000
        ) {
          let preSevenDay =
            new Date(this.start).getTime() + 3600 * 24 * 6 * 1000;
          this.end = this.$CommonFunction.timeFormat(preSevenDay, "yyyy-mm-dd");
        }
      }else {
        //结束日
        if (new Date(this.end).getTime() < new Date(this.start).getTime()) {
          this.start = "";
          let afterSevenDay =
            new Date(this.end).getTime() - 3600 * 24 * 6 * 1000;
          this.start = this.$CommonFunction.timeFormat(
            afterSevenDay,
            "yyyy-mm-dd"
          );
        } else if (
          new Date(this.end).getTime() >
          new Date(this.start).getTime() + 3600 * 24 * 6 * 1000
        ) {
          let afterSevenDay =
            new Date(this.end).getTime() - 3600 * 24 * 6 * 1000;
          this.start = this.$CommonFunction.timeFormat(
            afterSevenDay,
            "yyyy-mm-dd"
          );
        }
 }
    },

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐