对于elementui的el-date-picker月份选择器，默认本月，向前默认补全6个月的时间区间

最新推荐文章于 2024-09-04 16:30:58 发布

王新新2255

最新推荐文章于 2024-09-04 16:30:58 发布

阅读量2.4k

点赞数

分类专栏： vue.js 笔记文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_60336681/article/details/128645010

版权

本文介绍了如何配置ElementUI的el-date-picker组件，使其在初始时展示当前月及其后连续六个月的时间区间。内容包括解决方法和时间变化后的区间补全策略。

摘要由CSDN通过智能技术生成

问题需求：el-date-picker的默认格式是[‘2022-08’, ‘2023-01’]，业务需求是首次打开页面，默认值为当前6个月，并以[‘2022-08’, ‘2022-09’, ‘2022-10’, ‘2022-11’, ‘2022-12’]的格式补全区间传递给后端。方法如下：

 <el-date-picker
                v-model="monthsList"
                type="monthrange"
                clearable
                @change="chooseMonths"
                value-format="yyyy-MM"
                start-placeholder="起始月份"
                range-separator="至"
                end-placeholder="结束月份"
              >
              </el-date-picker>

  // 补全默认的6个月
    dealMonth() {
      let arr = []
      let thisMonth = this.$moment(new Date()).format('yyyy-MM')
      // let thisMonth = '2023-01'
      let str1 = thisMonth.substring(0, 4)
      let num1 = thisMonth.substring(5, 7)
      arr.push(thisMonth)
      if (Number(nu