zoukankan      html  css  js  c++  java
  • vue+elementUi选择日期范围并限制选择的日期范围

     <el-date-picker
                  v-model="form.date"
                  type="daterange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="截止日期"
                ></el-date-picker>

    定义pickerOptions,disabledDate方法设置禁用状态,true为禁用,false为不禁用,参数time为当前日期(不用理会,意思是插件中的每一个日期都会传进去校验)

       pickerOptions: {
            disabledDate: time => {
              return this.dealDisabledDate(time);
            }
          },

    自定义dealDisabledDate方法

       dealDisabledDate(time) {
          return (
            time.getTime() < new Date(this.selectStartDate).getTime() ||
            time.getTime() > new Date(this.selectEndDate).getTime()
          );
        },
    selectStartDate和selectEndDate是自己设置的日期,我这里意思是:当“当前日期time”毫秒数 小于selectStartDate的毫秒数 或者“当前日期time”毫秒数大于selectEndDate的毫秒数 就禁用
    效果:





  • 相关阅读:
    Spring 中各种通知
    Spring 中的注解
    Spring_DI利用set方法赋值Demo
    Beta冲刺总结
    用户使用调查报告
    Beta(7/7)
    Beta(6/7)
    Beta(5/7)
    Beta(4/7)
    Beta(3/7)
  • 原文地址:https://www.cnblogs.com/pzw23/p/13031924.html
Copyright © 2011-2022 走看看