iview中DatePicker时间段选择限制开始结束日期只能选择当月

作者：鹏仔先生日期：2025-04-24 16:28:37 浏览：9 分类：JavaScript

功能要求的是选择时间段时，开始结束日期只能选择当月

<DatePicker :options="options" :model-value="time" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="请选择时间" />

data() {
  return {
    options: {
      disabledDate(date) {
        let dateTime = new Date();
        let currentYear = dateTime.getFullYear();
        let currentMonth = dateTime.getMonth();
        let monthFirstDay = new Date(currentYear, currentMonth, 1);
        let newMonth = ++currentMonth;
        let newYear = currentYear;
        if (newMonth >= 12) {
          newMonth -= 12;
          newYear++;
        }
        let nextMonthFirst = new Date(newYear, newMonth, 1);
        let nonthLastDay = new Date(
          nextMonthFirst.getTime() - 24 * 60 * 60 * 1000
        );
        return (
          date.valueOf() < new Date(monthFirstDay).getTime() || date.valueOf() > new Date(nonthLastDay).getTime()
        );
      }
    }
  };
}