Angular DatePicker是否可设置仅显示指定范围的年份？

可行，你可以通过以下两种方式实现需求，同时保留原有视图样式：

方法一：使用官方内置属性（推荐，Angular Material 12+） #

Angular Material DatePicker提供了yearViewVisibleYears输入属性，可直接控制年份选择器中显示的年份范围：

1. 在组件类中定义可见年份范围：

import { YearVisibleRange } from '@angular/material/datepicker';

// 定义可见年份范围，从2016年开始，可自定义结束年份
visibleYears: YearVisibleRange = {
  min: 2016,
  max: new Date().getFullYear() + 3 // 例如设置到当前年份+3
};

2. 在模板中绑定该属性到日期选择器：

<mat-datepicker #picker [yearViewVisibleYears]="visibleYears"></mat-datepicker>

这种方式完全符合官方设计，不会破坏组件原有样式，且能精准控制显示的年份范围。

方法二：CSS样式控制（兼容低版本） #

如果你的Angular Material版本较低，不支持上述属性，可以通过CSS隐藏2016年之前的年份选项：

/* 隐藏2016年之前的所有年份单元格 */
.mat-calendar-year-view .mat-calendar-body-cell {
  &[aria-label^="200"],
  &[aria-label^="201"],
  &[aria-label="2010"],
  &[aria-label="2011"],
  &[aria-label="2012"],
  &[aria-label="2013"],
  &[aria-label="2014"],
  &[aria-label="2015"] {
    display: none;
  }
}

注意：CSS方式依赖组件DOM结构，若后续组件版本更新可能需要调整选择器。

内容的提问来源于stack exchange，提问作者DaveR