mat-date-picker в угловом материале
Опубликовано: 30 Января, 2022
Angular Material - это библиотека компонентов пользовательского интерфейса, разработанная командой Angular для создания компонентов дизайна для настольных и мобильных веб-приложений. Чтобы установить его, нам нужно, чтобы в нашем проекте был установлен angular. После того, как он у вас есть, вы можете ввести следующую команду и загрузить ее.
Синтаксис установки:
добавить @ angular / material
Подход:
- Сначала установите угловой материал с помощью вышеупомянутой команды.
- После завершения установки импортируйте MatDatepickerModule из @ angular / material в файле app.module.ts.
- Затем используйте тег <mat-datepicker-toggle>, чтобы использовать средство выбора даты материала angular, а также matInput.
- Мы также можем отключить всплывающее окно выбора даты и ввести дату вручную. Для разных цветов доступны разные темы.
- Чтобы изменить тему, нам нужно передать свойство цвета. Ниже я использовал тему с акцентом и тему по умолчанию, чтобы дать более широкий обзор.
- Выполнив вышеуказанные шаги, обслуживайте или запускайте проект.
Реализация кода:
app.module.ts:
Javascript
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { FormsModule } from "@angular/forms"; import { AppComponent } from "./app.component";import { BrowserAnimationsModule } from "@angular/platform-browser/animations";import { MatButtonModule } from "@angular/material/button";import { MatButtonToggleModule } from "@angular/material/button-toggle";import { MatDatepickerModule } from "@angular/material/datepicker";import { MatInputModule } from "@angular/material/input";import { MatFormFieldModule } from "@angular/material/form-field";import { MatNativeDateModule } from "@angular/material/core"; @NgModule({ imports: [BrowserModule, FormsModule, BrowserAnimationsModule, MatButtonModule, MatButtonToggleModule, MatDatepickerModule, MatInputModule, MatFormFieldModule, MatNativeDateModule ], declarations: [AppComponent], bootstrap: [AppComponent]})export class AppModule { } |
app.component.html:
HTML
<mat-form-field appearance="fill"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker1"> <mat-datepicker-toggle matSuffix [for]="picker1"> </mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker></mat-form-field><br> <mat-form-field color="accent" appearance="fill"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker2"> <mat-datepicker-toggle matSuffix [for]="picker2"> </mat-datepicker-toggle> <mat-datepicker #picker2></mat-datepicker></mat-form-field><br> <mat-form-field appearance="fill"> <mat-label>Completely disabled</mat-label> <input matInput [matDatepicker]="picker3" disabled> <mat-datepicker-toggle matSuffix [for]="picker3"> </mat-datepicker-toggle> <mat-datepicker #picker3></mat-datepicker></mat-form-field><br> <mat-form-field appearance="fill"> <mat-label>Popup disabled</mat-label> <input matInput [matDatepicker]="picker4"> <mat-datepicker-toggle matSuffix [for]="picker4" disabled> </mat-datepicker-toggle> <mat-datepicker #picker4></mat-datepicker></mat-form-field> |
Выход:
- GIF:
- Выходные изображения: таким образом открывается всплывающее окно с календарем:
- После выбора календаря дата отображается следующим образом:
- Если используется тема с акцентом:
