antd-vue - - - - - a-date-picker限制选择范围
- 1. 效果展示
- 2. 代码展示
1. 效果展示
如图:限制选择范围为 今年 & 去年 的 月份.
2. 代码展示
<template>
<a-date-picker
:disabledDate="disabledDate"
picker="month"
/>
</template>
<script>
export default {
methods: {
disabledDate(current) {
// 获取当前日期数据
const now = new Date();
// 创建一个新的 Date 对象,表示当前年份的第一天(1月1日)。
// 注意,JavaScript 的月份是从0开始计数的,所以0表示1月
const startOfYear = new Date(now.getFullYear(), 0, 1);
//创建一个新的 Date 对象,表示去年的第一天(1月1日)。
const startOfLastYear = new Date(now.getFullYear() - 1, 0, 1);
// 创建一个新的 Date 对象,表示当前年份的最后一天(12月31日)。
const endOfYear = new Date(now.getFullYear(), 11, 31);
// 这里使用了逻辑运算符。
// 当 current 存在且它小于去年的第一天或者大于今年的最后一天时,返回 true,这意味着这个日期会被禁用。
// 否则返回 false,即允许选择这个日期。
return current && (current < startOfLastYear || current > endOfYear);
}
}
};
</script>