angular 日期选择器

让我们从实现一个简单的基本日期选择器开始。 打开src/app/app.component.html文件并添加以下标记：

<input matInput [matDatepicker]="picker" placeholder="Pick a date"><mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle><mat-datepicker #picker></mat-datepicker>

如您所见，使用input字段和日历弹出窗口实现了物料日期选择器。 我们使用input元素上的matDatepicker属性使用模板引用变量( #picker )将其连接到mat-datepicker指令。

You can also use the startAt property to set a start date on <mat-datepicker> as follows:

您还可以使用startAt属性在<mat-datepicker>上设置开始日期，如下所示：

<mat-datepicker #picker [startAt]="startDate"></mat-datepicker>

Make sure you define a startDate variable in your component as follows:

确保按如下所示在组件中定义一个startDate变量：

startDate = new Date(1990, 0, 1);

You can also change the calendar start view using startView property of <mat-datepicker> which can be used to show a month, year or multi-year for selection with the month is the default:

您还可以使用<mat-datepicker> startView属性更改日历开始视图， startView属性可用于显示月份 ， 年份或多年以供选择，默认为月份：

startView="year";startView="multi-year";

You can use the min and max properties of the input field to set range of dates that can be selected as follows:

您可以使用input字段的min和max属性来设置日期范围，可以选择以下日期：

<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Pick a date">

The minDate and maxDate variables need to defined in the associated component’s class with the desired date values:

需要在关联组件的类中使用所需的日期值来定义minDate和maxDate变量：

minDate = new Date(1989, 2, 1); maxDate = new Date(1999, 3, 3);

Material date picker provides two events that can be fired from the input field which are (dateInput) and (dateChange):

物料日期选择器提供了两个可以从input字段触发的事件，它们是(dateInput)和(dateChange) (dateInput) (dateChange) ：

• dateInput is fired when values are changed by typing a date in the input field or pick a date from the calendar

  通过在输入字段中输入日期或从日历中选择日期来更改值时，将触发dateInput

• dateChange is fired on blur after the user changes the value in the input field or the date is changed from the calendar.

  用户更改输入字段中的值或更改日历中的日期后，模糊时会触发dateChange 。

这是一个例子：

<input matInput [matDatepicker]="picker" placeholder="Pick a date" (dateInput)="inputEvent($event)" (dateChange)="changeEvent($event)">

You need to define the inputEvent and changeEvent methods in the corresponding component’s class as follows:

您需要在相应组件的类中定义inputEvent和changeEvent方法，如下所示：

inputEvent(event){    console.log(event.value);}changeEvent(event){    console.log(event.value);}

You can use the matDatepickerFilter property of the input field to disable specific dates using a filter function that returns either true or false for a date in calendar popup. If the function returns false for a date, it will be disabled and can not be selected by users:

您可以使用input字段的matDatepickerFilter属性来禁用特定日期，该过滤器功能可以为日历弹出窗口中的日期返回true或false。 如果该函数返回的日期为false，它将被禁用，并且用户无法选择：

<input matInput [matDatepicker]="picker" [matDatepickerFilter]="fn" placeholder="Pick a date">

You need to define the filtering function in the corresponding component’s class. For example:

您需要在相应组件的类中定义过滤功能。 例如：

fn = (aDate: Date): boolean => {    const date = aDate.getDate();     // Odd dates are disabled.    return date % 2 == 1;  }

You can use the disabled property which is available on the <input>, <mat-datepicker-toggle> and <mat-datepicker> elements to make the element disabled and read-only:

您可以使用<input> ， <mat-datepicker-toggle>和<mat-datepicker>元素上可用的disabled属性来使该元素变为禁用状态和只读状态：

<input matInput [matDatepicker]="picker" placeholder="Pick a date" [disabled]="true">    <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="true">    </mat-datepicker-toggle>    <mat-datepicker #picker [disabled]="true"></mat-datepicker>