网站搜索

javascript - Angular Material 日期选择器隐藏/删除禁用的年份


我禁用了2018年前的年份,但我想隐藏/删除它们。

年份选择范围显示从1998年开始,应该是2018年。

我们能只显示3-4年吗?因为这里显示的是24年。

答案#1

您可以使用 [minDate] 和 [maxDate] 输入来限制可导航和选择的日期。如果您未指定其中任何一个,您将可以无限导航,并且年份选择框将显示从当前可见月份起前后各 10 年。

在 HTML 模板中 硬编码 设置 minDate 和 maxDate :

<ngb-datepicker
        [minDate]="{year: 2018, month: 1, day: 1}"
        [maxDate]="{year: 2024, month: 12, day: 31}">
</ngb-datepicker>

如果你想动态地设置minDate和maxDate,你可以在component.ts文件中按如下方式设置日期:

now: Date = new Date();

minDate: any;
maxDate: any;

this.minDate = { year: this.now.getFullYear() - 3, month: this.now.getMonth() + 1, day: this.now.getDate() };

this.maxDate = { year: this.now.getFullYear() + 2, month: this.now.getMonth() + 1, day: this.now.getDate() };

这将给你一个日期范围,从今天起三年前,到今天,再到未来两年。

在 HTML 模板中,你将需要引用 ’minDate和maxDate`:

<ngb-datepicker
        [minDate]="minDate"
        [maxDate]="maxDate">
</ngb-datepicker>

答案#2

材料中有一个常量控制它。yearsPerPage。不过不确定是否以及如何可以更改它。

根据这个回答,你无法覆盖它。