当前位置：首页 > article >正文

antd-vue - - - - - a-date-picker限制选择范围

article 2025/1/5 17:48:05

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>