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

问题需求: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(num1) >= 6) {
        for (let i = 1; i < 6; i++) {
          arr.push(str1 + '-' + (Number(num1) - i + '').padStart(2, '0'))
        }
      } else {
        for (let i = 1; i < 6; i++) {
          if (Number(num1) - i > 0) {
            arr.push(str1 + '-' + (Number(num1) - i + '').padStart(2, '0'))
          } else {
            let str2 = Number(str1) - 1
            for (let j = 12; j > 0; j--) {
              if (arr.length >= 6) {
                break
              }
              arr.push(str2 + '-' + (Number(j) + '').padStart(2, '0'))
            }
          }
        }
      }
      this.$nextTick((_) => {
        this.searchTime = [arr[arr.length - 1], arr[0]]
        return arr
      })
      return arr
    },
  created() {
    this.monthsList=[arr[arr.length - 1], arr[0]]
    this.monthsArr = this.dealMonth()
    //加载后时间为默认当前的6个月
  },

如果时间发生改变,需要重新按顺序补全,见另外一篇博客
《对于elementui的el-date-picker月份选择器,补全时间区间》

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值