如何让AngularJS Material日期选择器仅显示18年前的日期？

要实现这个需求，核心是通过md-max-date限制可选的最大日期为当前日期往前推18年，同时配合日期过滤器让不可选日期灰化，具体步骤如下：

1. 在控制器中计算18年前的日期 #

首先在你的AngularJS控制器里，计算出当前日期减去18年的日期，把它赋值给作用域变量供视图使用：

angular.module('yourAppModule').controller('YourController', ['$scope', function($scope) {
  // 获取当前日期
  const today = new Date();
  // 计算18年前的同一天：注意Date的月份是0-based（0=1月，11=12月），直接使用当前月份即可
  $scope.maxDate = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate());

  // 更新日期过滤器函数，确保只返回<=maxDate的日期
  this.dateOfBirth = function(date) {
    return date <= $scope.maxDate;
  };
}]);

2. 更新日期选择器的HTML代码 #

确保你的md-datepicker正确绑定md-max-date，并且过滤器函数关联正确：

<md-datepicker 
  ng-model="ln.dateofbirth" 
  md-current-view="year" 
  md-date-filter="ctrl.dateOfBirth" 
  md-max-date="maxDate" 
  md-placeholder="Date Of Birth" 
  required
></md-datepicker>

关键说明 #

• md-max-date是AngularJS Material日期选择器的原生属性，直接限制用户能选择的最大日期，超过这个日期的选项会被禁用。
• md-date-filter用于进一步过滤可选日期，这里我们让它只返回小于等于maxDate的日期，确保所有未满18年的日期都不可选且灰化显示。
• 注意日期计算的细节：Date构造函数的月份参数是从0开始的，所以不需要额外调整月份值，直接使用当前日期的月份即可得到准确的18年前的同一天。
• 确保你的视图已经通过ng-controller="YourController as ctrl"关联到对应的控制器，这样ctrl.dateOfBirth才能正确调用过滤器函数。

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