标签：picker el 月份 timemonth time date 选择器

使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。