使用el-date-picker根据开始月份，动态禁用结束月份

• 概要
• 全部代码

概要

element上有一种月份期间的选择框，可在一个选择器中便捷地选择一个月份范围，但是我们的需求是用两个月份选择器，一个选择器为开始时间，一个为结束时间，结束时间只能选择开始时间以后的月份。效果如下图：

全部代码

代码很简单，就不解释了。

<template>
  <div class="home">
    <el-form>
      <el-row>
          <el-row>
            <el-col :span="6">
              <!-- 开始月份 -->
              <el-form-item label="开始月份">
                <el-date-picker
                    v-model="queryConditionFrom.beginMonth"
                    type="month"
                    value-format="yyyyMM"
                    placeholder="选择月">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 结束月份 -->
              <el-form-item label="结束月份">
                <el-date-picker
                    v-model="queryConditionFrom.endMonth"
                    type="month"
                    value-format="yyyyMM"
                    placeholder="选择月"
                    :picker-options="pickerOptions"
                    >
                </el-date-picker>
              </el-form-item>
            
            </el-col>
          </el-row>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
  },
  data(){
    return{
      queryConditionFrom:{
        beginMonth:'',
        endMonth:'',
      },
      pickerOptions:{},
    }
  },
  methods:{

  },
  watch:{
    "queryConditionFrom.beginMonth"(newDate,oldDate){
      this.pickerOptions={
        disabledDate(time){
          let timeyear = time.getFullYear();
          let timemonth = time.getMonth()+1;
          if(timemonth>=1 && timemonth<=9){
            timemonth = "0" + timemonth;
          }
          const elTimeDate = timeyear.toString()+ timemonth.toString();
          if(newDate){
            return elTimeDate<newDate
          }
        }
      }
    }
  }
}
</script>

标签：picker,el,月份,timemonth,time,date,选择器
来源： https://blog.csdn.net/shensa5556/article/details/122100353