iview之Date-picker设置禁用日期的问题

场景:开始日期和结束日期,结束日期必须在开始日期之后,选择了开始日期之后,在选择结束日期时,将开始日期之前的日期设置禁用。
官网说的比较详细了,是利用控件的 options属性,该属性绑定一个对象,给这个对象设置 disabledDate ,disabledDate 是一个函数,如下:

<Date-picker type="date" :options="options3" placeholder="选择日期" style="width: 200px"></Date-picker>

options3: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                }

但遇到如上情况,开始日期在还没选择时,并没有办法进行比较判断。所以需要在拿到开始日期后,修改结束日期的options属性绑定的值。

<FormItem prop="curDate" label="开始日期">
            <Date-picker
              type="date"
              placeholder="请选择开始日期"
              :value="form.curDate"
              @on-change="curDateChange"
            >
            </Date-picker>
          </FormItem>

 <FormItem prop="endDate" label="结束日期">
            <Date-picker
              type="date"
              placeholder="请选择结束日期"
              v-model="form.endDate"
              @on-change="endDateChange"
              :options="endOptions"
            >
            </Date-picker>
          </FormItem>

//开始日期的change事件
    curDateChange(e) {
      this.form.curDate = e;
      this.setDisabledDate();
    },
    //结束日期的change事件
    endDateChange(e) {
      this.form.endDate = e;
    },
    //设置禁用日期
    setDisabledDate() {
      this.endOptions = {
        disabledDate: date => {
          let startDate = this.form.curDate
            ? new Date(this.form.curDate).valueOf()
            : "";
          return date && date.valueOf() < startDate;
        }
      };
    },

来看看成果图吧

iview之Date-picker设置禁用日期的问题

© 版权声明
THE END
如果内容对您有所帮助,就支持一下吧!
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容