iView DatePicker 实现月份范围选择

最新推荐文章于 2023-12-26 10:04:58 发布

子南

最新推荐文章于 2023-12-26 10:04:58 发布

阅读量1.4k

点赞数 2

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/m0_62099781/article/details/125291569

版权

本文介绍了如何利用iview的DatePicker组件，通过设置options对象的disabledDate属性，来实现月份范围的选择限制。当选择开始月份时，不允许选择大于结束月份的日期；反之，选择结束月份时，不允许选择小于开始月份的日期。示例代码包括HTML和JavaScript部分，详细展示了如何在Vue应用中实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过iview组件库可以得到： DatePicker无法直接实现月份的范围选择，但是发现，可以通过设置属性 options 对象中的 disabledDate 可以设置不可选择的日期。

HTML代码：

<DatePicker
  type="month"
  placeholder="请选择起始月"
  style="width: 200px"
  :options="optionsStart"
  @on-change="onChangeStart"
></DatePicker>
<span> - </span>
<DatePicker
  type="month"
  placeholder="请选择终止月"
  style="width: 200px"
  :options="optionsEnd"
  @on-change="onChangeEnd"
></DatePicker>

JS代码

data() {
    return {
      startTime: null,
      endTime: null,
      optionsStart: {
        disabledDate: (date) => {
          if (this.endTime) {
            const end = this.getDate(this.endTime);
            return date > end;
          }
        },
      },
      optionsEnd: {
        disabledDate: (date) => {
          if (this.startTime) {
            const start = this.getDate(this.startTime);
            return date < start;
          }
        },
      },
    };
  },

methods: {
    // 格式化日期
    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;
    },
    onChangeStart(date) {
      this.startTime = date;
    },
    onChangeEnd(date) {
      this.endTime = date;
    },
  },