iview中DatePicker时间段限制只选当月
功能要求选择时间段时,开始结束日期只能选择当月。
模板:
<DatePicker :options="options" :model-value="time" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="请选择时间" />data中配置disabledDate限制可选范围:
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 + 1;
let newYear = currentYear;
if (newMonth >= 12) { newMonth -= 12; newYear++; }
let nextMonthFirst = new Date(newYear, newMonth, 1);
let monthLastDay = new Date(nextMonthFirst.getTime() - 86400000);
return date.valueOf() < monthFirstDay.getTime() || date.valueOf() > monthLastDay.getTime();
}
}
};
}
最新打赏
