iview DatePicker 只能选本月

Posted 2020-12-01 mxyr

html

<FormItem label="活动时间" prop="activity_time">
                    <DatePicker
                      v-model="addForm.activity_time"
                      @on-change="param.activity_time=$event"
                      type="date"
                      format="yyyy-MM-dd"
                      :options="options"
                      placeholder="活动时间"
                      style="width: 214px"
                      :disabled="modalDisable"
                    ></DatePicker>
                  </FormItem>

 

js

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()
          );
        }
      } //时间范围限制