Angular Material - Datepicker

datepicker 允许用户通过文本输入或从日历中选择日期来输入日期。 它由一个文本输入和一个日历弹出窗口组成，该弹出窗口与文本输入上的 matDatepicker 属性相关联。

有一个可选的日期选择器切换按钮，它为用户提供了一种打开日期选择器弹出窗口的简便方法。

它是一个作为 <mat-form-field> 的一部分的输入，并且切换可以用作内容输入的 前缀 或 后缀 。

如果我们要自定义 mat-datepicker-toggle 中的图标，我们可以使用 matDatepickerToggleIcon 指令来实现。

app.component.html

app.component.ts

输出

日期范围选择

如果我们要选择多种类型的日期，我们可以使用 mat-date-range-input 和 mat-date-range-picker 组件。 它们以串联方式运行，类似于 mat-datepicker 并需要日期选择器输入。

mat-date-range-picker 用作选择组件日期的弹出面板。 它的工作方式与 matte-datepicker 相同，但允许用户选择多个时间

使用 rangePicker 属性连接范围选择器

日期范围输入表单集成

matte-date-range-input 组件与表单图形指令一起使用，以对来自 @angular/forms 的起始值和结束值求和，并将其作为一组进行验证。

app.component.html

app.component.ts

输出

更改日期选择器的颜色

日期选择器弹出窗口继承与 matte-form 字段关联的调色板（primary、accent 或 warning）。 如果我们要为弹出窗口指定不同的调色板，我们可以在 mat-datapic 上设置颜色属性。

app.component.html

app.component.ts

app.component.css

输出

输入和更改事件

输入的基本 (input) 和 (change) 事件只会触发用户与输入元素的交互； 当用户从日历弹出窗口中选择日期时，它们不会触发。

app.component.html

app.component.ts

app.component.css

输出

选择日期实现和日期格式设置

日期选择器构建为与日期实现无关。 可以使其与不同日期的实现一起使用。 但是，开发人员需要提供适当的片段，以便 Datepicker 与他们选择的性能一起工作。 确保做到这一点的最简单方法是导入提供的其中一个数据模块

MatNativeDateModule

MatMomentDateModule

突出显示特定日期

如果我们要将一个或多个 CSS 类应用于某些日历日期（例如，突出显示节假日）。 它接受一个函数，其中包含每个日历日期，并将应用于任何返回的类。 返回值将是 ngClass 所接受的任何内容。

app.component.html

app.component.ts

app.component.css

输出

键盘交互

日期选择器支持以下键盘快捷键

在月份视图中

在年份视图中

在多年视图中

Angular Content 是由 Angular 团队开发的 UI 组件库，用于为桌面和移动 Web 应用程序构建设计组件。 要安装它，我们需要在我们的项目中安装 Angular，一旦你安装了它，你就可以输入下面的命令并下载它。

示例 1

app.module.ts

app.component.html

输出

这是一种打开包含日历的弹出窗口的方式

示例 1

修改后的模块描述符 app.module.ts。

修改后的 HTML 主机文件 app.component.html。

输出

说明

在前面的示例中，我们创建了一个输入框，并通过使用 [matDatepicker] 属性绑定了一个名为 picker 的日期选择器。 之后，我们通过使用 mat-date picker 标签创建了一个名为 picker 的日期选择器。