element-ui时间选择器--设置禁止选择的时间

场景需求：开始日期不能小于今天，在今天之前的日期禁止选择，结束日期不能小于开始日期，开始日期之前的日期禁止选择。

效果图：

element-ui的时间选择器中，有一个picker-options的属性，属性值中有个disabledDate可以设置禁用状态，类型为函数，参数为今天日期，通过返回Boolean值来确定日期是否可以选择。

因此，开始日期可以通过picker-options这个属性去设置禁用选项：

setStartDate(){
          let time = this.getDate()//把当天时间转化为yyyy-MM-dd格式的方法
          let self = this
          let obj = Object.assign({},this.startDateLimit,{
            disabledDate:function(date){
              return self.getDate(date) < time
            }
          })
          return obj
        },
...

当选择完开始日期后，开始选择结束日期了，这时可以通过已经选择的开始日期来设置结束日期的禁选项。

在开始日期的选择器上绑定change事件，开始日期发生改变就可以立刻改变结束日期的禁选项。

changeEnd(){
          //如果已经存在结束日期
          if(this.form.endDate){
            if(this.form.beginDate > this.form.endDate){
              this.form.endDate = ''
              this.$message.warning('结束日期小于开始日期，请重新选择')
              return ;
            }
          }

          //如果结束日期尚未选择
          if(!this.form.beginDate){
            this.$message.warning('请先选择开始日期')
            this.endDateLimit = Object.assign({},this.endDateLimit,{
              disabledDate:(date)=>{
                return true
              }
            })
          }else{
            let self = this
            this.endDateLimit = Object.assign({},this.endDateLimit,{
              disabledDate:(date)=>{
                return self.getDate(date) < this.form.beginDate
              }
            })
          }
        },

html代码：

 <el-date-picker
          size="mini"
          class="s-form"
          v-model="form.beginDate"
          type="date"
          @change="changeEnd"
          :picker-options="startDateLimit"
          clearable
          value-format="yyyy-MM-dd"
          placeholder="选择开始日期">
        </el-date-picker>
      -
        <el-date-picker
          v-model="form.endDate"
          class="s-form"
          :picker-options="endDateLimit"
          @focus="changeEnd"
          @change="setTime"
          type="date"
          clearable
          size="mini"
          value-format="yyyy-MM-dd"
          placeholder="选择结束日期">
        </el-date-picker>

element-ui时间选择器--设置禁止选择的时间

相关推荐