iview中使用datePicker实现选择月份范围

项目中,有时需要选择月份范围(如:开始年月:202-05,结束年月:2020-07),查阅iview官方文档可知:
在这里插入图片描述
没有提供选择月份范围的type;

一个办法是,使用两个 type=month 的datePicker方式来控制开始月份与结束月份:
在这里插入图片描述
1.创建页面代码:

<DatePicker
              type="month"
              placement="bottom-start"
              placeholder="请选择开始月份"
              @on-change="handleChangeBeginMonth"
              :options="startMonthOptions"
              :editable="false"
            ></DatePicker>  
            <DatePicker
              type="month"
              placement="bottom-start"
              placeholder="请选择结束月份"
              @on-change="handleChangeEndMonth"
              :options="endMonthOptions"
              :editable="false"
            ></DatePicker>

获取开始年月与结束年月:

// 获取开始月份
    handleChangeBeginMonth(month) {
      this.beginMonth = month;
    },
    // 获取结束月份
    handleChangeEndMonth(month) {
      this.endMonth = month;
    },

2.创建一个可将选择的年月字符串转成年月日(日期可设置成1号)的方法,在下面控制开始年月与结束年月时要用到:

// 字符串转日期
    getDate(strDate) {
      let monthStr = strDate.split("-")[1];
      let newMonthStr =  parseInt(monthStr)+"";
      strDate = strDate.split("-")[0]+"-"+ newMonthStr +"-1";
      var date = eval(
        "new Date(" +
          strDate
            .replace(/\d+(?=-[^-]+$)/, function(a) {
              return parseInt(a, 10) - 1;
            })
            .match(/\d+/g) +
          ")"
      );
      return date;
    },

注意,直接在选择的月份后面拼日期“01”,会报错:
在这里插入图片描述
所以,这个方法将10月份之前的月份去除前面的零,如将2020-07拼成2020-7-1;

3.在data中创建限制不可选日期的逻辑代码,控制开始年月小于结束年月,同时,两个年月都小于当前年月:

beginMonth: "", // 选择的开始年月
      endMonth: "", // 选择的结束年月
      // 限制可选的开始年月
      startMonthOptions: {
        disabledDate: date => {
          if (this.endMonth) {
            let endDate = this.getDate(this.endMonth);
            return (date && date > endDate) || date > new Date();
          } else {
            return date && date > new Date();
          }
        }
      },
      // 限制可选的结束年月
      endMonthOptions: {
        disabledDate: date => {
          if (this.beginMonth) {
            let beginDate = this.getDate(this.beginMonth);
            return (date && date < beginDate) || date > new Date();
          } else {
            return date && date > new Date();
          }
        }
      }

注意:要使用箭头函数,否则disabledDate中获取不到vue实例;

除此之外,可以弃用on-change方法绑定年月,而使用v-model绑定字段,获取date类型的年月,这种情况不使用getDate方法,而是通过date类型数据的getTime()方法直接比较大小,不过此时获取的年月是date类型,在向后台传参时,需注意处理;

测试效果:
在这里插入图片描述
在这里插入图片描述
datePicker详情可参考官方文档:

https://www.iviewui.com/components/date-picker

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

徐胤哲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值