MAT 日期选择器

17 Mar 2025 | 4 分钟阅读

Angular Material 中的日期选择器是什么？

日期选择器是 Angular Material 的一个组件，它允许用户通过文本输入或从日历弹出窗口中选择日期。它由多个组件、指令和日期实现模块组成，它们协同工作。

Angular Material 日期选择器的 API 参考

将日期选择器连接到输入框

日期选择器由文本输入框和日历弹出窗口组成，通过 `mat-Date-picker` 属性与文本输入框关联。它还有一个可选的日期选择器切换按钮，为用户提供了一种简单的方式来打开日期选择器弹出窗口。它与 `` 输入框的工作方式完全相同。

示例 1： 基本日期选择器

import {Component} from '@angular/core';
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
})
export class DatepickerOverviewExample {}

<mat-form-field appearance = "fill">
  <mat-label> Date Select </mat-label>
  <input matInput [matDatepicker] = "picker">
  <mat-datepicker-toggle matSuffix [for] = "picker"> </mat-datepicker-toggle>
  <mat-datepicker #picker> </mat-datepicker>
</mat-form-field>

日期范围选择

如果用户选择两个日期而不是单个日期，则需要使用 `mat-date-range-input` 和 `mat-date-range-picker` 模块。

`` 和 `` 模块分别需要两个输入框元素来表示开始日期和结束日期。

<mat-date-range-input>
  <input matStartDate placeholder = "Start date">
  <input matEndDate placeholder = "End date">
</mat-date-range-input>

`` 模块充当用于选择日期的弹出面板。它的工作方式与 `mat-date-picker` 相同，但在这种情况下，用户需要选择两次日期。

使用 `rangePicker` 属性连接 `` 和 `` 模块

<mat-date-range-input [rangePicker] = "picker">
  <input matStartDate placeholder = "Start date">
  <input matEndDate placeholder = "End date">
</mat-date-range-input>
<mat-date-range-picker #picker> </mat-date-range-picker>

示例 2：基本日期范围选择器

import {Component} from '@angular/core';
@Component({
  selector: 'date-range-picker-overview-example',
  templateUrl: 'date-range-picker-overview-example.html',
})
export class DateRangePickerOverviewExample {}

<mat-form-field appearance = "fill">
  <mat-label> enter the start date and end date </mat-label>
  <mat-date-range-input [rangePicker] = "picker">
    <input matStartDate placeholder = "Start date">
    <input matEndDate placeholder = "End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for] = "picker"> </mat-datepicker-toggle>
  <mat-date-range-picker #picker> </mat-date-range-picker>
</mat-form-field>

日期范围输入表单集成

`` 模块可以与 `FormGroup` 指令一起使用，以连接 `@angular/forms` 中的开始和结束值，并将它们作为一个组进行验证。

示例 3：日期范围选择器表单集成

import {Component} from '@angular/core';
import {FormGroup, FormControl} from '@angular/forms';

@Component({
  selector: 'date-range-picker-forms-example',
  templateUrl: 'date-range-picker-forms-example.html',
})
export class DateRangePickerFormsExample {
  range = new FormGroup({
    start: new FormControl(),
    end: new FormControl()
  });
}

<mat-form-field appearance = "fill">
  <mat-label> Enter the Start date and End date </mat-label>
  <mat-date-range-input [formGroup] = "range" [rangePicker] = "picker">
    <input matStartDate formControlName = "start" placeholder = "Start date">
    <input matEndDate formControlName = "end" placeholder = "End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for] = "picker"> </mat-datepicker-toggle>
  <mat-date-range-picker #picker> </mat-date-range-picker>

  <mat-error *ngIf = "range.controls.start.hasError('matStartDateInvalid')"> Invalid start date </mat-error>
  <mat-error *ngIf = "range.controls.end.hasError('matEndDateInvalid')"> Invalid end date </mat-error>
</mat-form-field>

<p> Selected range: {{range.value | json}} </p>

更改日期选择器的颜色

日期选择器弹出窗口会自动继承 `mat-form-field` 的颜色主题（警告、发音或主色）。如果要更改弹出窗口的颜色主题，可以通过在 `` 上设置 `color` 属性来实现。

示例 4：日期选择器主题颜色

import {Component} from '@angular/core';

@Component({
  selector: 'datepicker-color-example',
  templateUrl: 'datepicker-color-example.html',
  styleUrls: ['datepicker-color-example.css'],
})
export class DatepickerColorExample {}

<mat-form-field color = "accent" appearance = "fill">
  <mat-label> Accent color calendar </mat-label>
  <input matInput [matDatepicker] = "picker1">
  <mat-datepicker-toggle matSuffix [for] = "picker1"> </mat-datepicker-toggle>
  <mat-datepicker #picker1> </mat-datepicker>
</mat-form-field>

<mat-form-field color = "warn" appearance = "fill">
  <mat-label> Warn color calendar </mat-label>
  <input matInput [matDatepicker] = "picker2">
  <mat-datepicker-toggle matSuffix [for] = "picker2"> </mat-datepicker-toggle>
  <mat-datepicker #picker2 color = "warn"> </mat-datepicker>
</mat-form-field>

<mat-form-field color = "primary" appearance = "fill">
  <mat-label> Primary color calendar </mat-label>
  <input matInput [matDatepicker] = "picker3">
  <mat-datepicker-toggle matSuffix [for] = "picker3"> </mat-datepicker-toggle>
  <mat-datepicker #picker2> </mat-datepicker>
</mat-form-field>

高亮特定日期

如果用户想在日历中高亮显示某些日期（例如高亮显示一个假期），可以使用 `dateClass` 输入来实现。

示例 5：带有自定义日期类的日期选择器

TS 代码

import {Component, ViewEncapsulation} from '@angular/core';
import {MatCalendarCellClassFunction} from '@angular/material/datepicker';

@Component({
  selector: 'datepicker-date-class-example',
  templateUrl: 'datepicker-date-class-example.html',
  styleUrls: ['datepicker-date-class-example.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DatepickerDateClassExample {
  dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
    // Only highlight dates inside the month view.
    if (view === 'month') {
      const date = cellDate.getDate();

      // Highlight the 1st and 20th day of each month.
      return (date === 2 || date === 22) ? 'example-custom-date-class' : '';
    }

    return '';
  }
}

HTML 代码

<mat-form-field class = "example-full-width" appearance = "fill">
  <mat-label> Enter a date </mat-label>
  <input matInput [matDatepicker] = "picker">
  <mat-datepicker-toggle matSuffix [for] = "picker"> </mat-datepicker-toggle>
  <mat-datepicker [dateClass] = "dateClass" #picker> </mat-datepicker>
</mat-form-field>

CSS 代码

.example-custom-date-class {
  background: rgb(255, 0, 0);
  border-radius: 100%;
}

下一个主题PHP cURL

← 上一个下一个 →

MAT 日期选择器

Angular Material 中的日期选择器是什么？

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

博客

MAT 日期选择器

Angular Material 中的日期选择器是什么？

相关帖子

什么是溢出错误？

创业类型

世界濒危部落

火山类型

什么是 Terraform

印度西部

饮用生牛奶的危险

预算控制的优缺点

英国在印度的经济政策

提高生育能力的自然方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器