angular 日期选择器_带有日历和日期范围的Angular 10物料日期选择器

angular 日期选择器

Angular 10 has been recently released and introduced some new features as usual with any new major release. Among the new features is adding the date range feature to the date picker component of Angular Material.

Angular 10最近已发布，并在所有新的主要版本中像往常一样引入了一些新功能。 新功能中包括将日期范围功能添加到Angular Material的日期选择器组件中。

Throughout this tutorial, we’ll learn how to create a basic material date picker using mat-datepicker directive and then how to create one with a date range using the new mat-date-range-picker directive available in Angular 10 Material.

在整个教程中，我们将学习如何使用mat-datepicker指令创建基本的物料日期选择mat-datepicker ，然后如何使用Angular 10 Material中可用的新mat-date-range-picker mat-datepicker指令创建具有日期范围的物料。

We also learn how to use the matDatepickerFilter property of the input field to disable specific dates using a filter functionand the disabled property which is available on the <input>, <mat-datepicker-toggle> and <mat-datepicker> elements to make the element disabled.

我们还将学习如何使用input字段的matDatepickerFilter属性来使用过滤器功能以及<input> ， <mat-datepicker-toggle>和<mat-datepicker>元素上可用的disabled属性来禁用特定日期，以使元素已禁用。

We’ll learn about Material date picker events that can be triggered from the input field – the dateInput and dateChange events then how to use the min and max properties of the input field to set the range of dates that can be selected by the users of your Angular 10 app.

我们将了解可以从触发材料的日期选择器的事件input场-在dateInput和dateChange事件，那么如何使用min和max的属性input字段来设置，可以由用户进行选择的日期范围您的Angular 10应用。

Finally, we will learn how to change the calendar start view using the startView property of <mat-datepicker> directive which can be used to show a month, year, or multi-year for user selection and how to use the startAt property to set start date on <mat-datepicker>.

最后，我们将学习如何使用<mat-datepicker>指令的startView属性更改日历开始视图，该指令可用于显示月份 ， 年份或多年供用户选择，以及如何使用startAt属性设置开始日期在<mat-datepicker> 。

生成Angular 10项目 (Generating an Angular 10 Project)

As a prerequisite you need to have Angular 10 CLI installed which you need to use to generate a new Angular 10 project using the following command:

作为必备条件，您需要安装Angular 10 CLI，您需要使用它使用以下命令来生成新的Angular 10项目：

$ ng new AngularMaterialDateRangePicker#? Would you like to add Angular routing? No
#? Which stylesheet format would you like to use? CSS

You’ll be prompted for routing and the style-sheets format, answer them as you see fit because that’s not going to affect the tested feature.

系统会提示您输入路由和样式表格式，并在您认为合适时回答它们，因为这不会影响已测试的功能。

设置Angular 10材质 (Setting up Angular 10 Material)

Next, you need to setup Angular Material in your project. This can be done easily with the following command:

接下