Угловой указатель даты материала

Опубликовано: 22 Февраля, 2023

Angular Material — это библиотека компонентов пользовательского интерфейса, разработанная Google, чтобы разработчики Angular могли разрабатывать современные приложения структурированным и отзывчивым образом. Используя эту библиотеку, мы можем значительно повысить удобство работы конечного пользователя, тем самым популяризируя наше приложение. Эта библиотека содержит современные готовые к использованию элементы, которые можно использовать напрямую с минимальным дополнительным кодом или без него.

Компонент Datepicker в угловом материале используется для выбора дат в качестве входных значений. Для создания Datepicker мы используем директиву <mat-datepicker #picker> . Для выбора дат диапазона вместо выбора одной даты мы можем использовать компоненты mat-date-range-input и mat-date-range-picker .

Синтаксис:

<mat-datepicker #picker>
    ...
</mat-datepicker>

Синтаксис установки: основным предварительным условием является то, что в системе должен быть установлен Angular CLI, чтобы добавить и настроить библиотеку материалов Angular. Следующая команда выполняется в Angular CLI для установки библиотеки материалов angular:

ng add @angular/material

Перед выполнением вышеуказанной команды убедитесь, что путь открыт в терминале.

Подробную процедуру установки см. в статье Добавление компонента Angular Material в приложение Angular.

Добавление компонента Datepicker:

Чтобы использовать компонент Datepicker, нам нужно импортировать следующие модули в файл app.module.ts:

import { MatDatepickerModule } from ‘@angular/material/datepicker’;
import { MatInputModule } from ‘@angular/material/input’;
import { MatNativeDateModule } from ‘@angular/material/core’;

Чтобы использовать компонент Datepicker в нашем коде, мы должны импортировать MatDatepickerModule, MatInputModule и MatNativeDateModule в массив imports.

Структура проекта: После успешной установки структура проекта будет выглядеть следующим образом:

Пример 1. Пример ниже иллюстрирует базовую реализацию средства выбора даты Angular Material.

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { MatDatepickerModule } 
    from "@angular/material/datepicker";
import { MatInputModule } 
    from "@angular/material/input";
import { MatNativeDateModule } 
    from "@angular/material/core";
import { MatFormFieldModule } 
    from "@angular/material/form-field";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatInputModule,
        MatFormFieldModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

Javascript

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "AngularApp";
}

app.component.html

HTML

<div>
    <h1>GeeksforGeeks</h1>
    <h3>Angular Material Datepicker</h3>
    <mat-form-field appearance="fill">
        <mat-label>Choose a date</mat-label>
        <input matInput [matDatepicker]="picker">
        <mat-hint>MM/DD/YYYY</mat-hint>
        <mat-datepicker-toggle matSuffix [for]="picker">
          </mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
    <br>
    <h3>Angular Material Datepicker Range Selection</h3>
    <mat-form-field appearance="fill">
        <mat-label>Enter a date range</mat-label>
        <mat-date-range-input [rangePicker]="picker1">
            <input matStartDate placeholder="Start date">
            <input matEndDate placeholder="End date">
        </mat-date-range-input>
        <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
        <mat-datepicker-toggle matSuffix [for]="picker1">
          </mat-datepicker-toggle>
        <mat-date-range-picker #picker1></mat-date-range-picker>
    </mat-form-field>
</div>

Выход:

Пример 2. В приведенном ниже примере показана реализация средства выбора даты путем указания средства выбора диапазона дат с настраиваемой стратегией выбора в Angular Material.

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { MatDatepickerModule } 
    from "@angular/material/datepicker";
import { MatInputModule } 
    from "@angular/material/input";
import { MatNativeDateModule } 
    from "@angular/material/core";
import { MatFormFieldModule } 
    from "@angular/material/form-field";
import { FormsModule, ReactiveFormsModule } 
    from "@angular/forms";
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatInputModule,
        MatFormFieldModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

Javascript

import { Component, Injectable } from "@angular/core";
import { DateAdapter } from "@angular/material/core";
import {
    MatDateRangeSelectionStrategy,
    DateRange,
    MAT_DATE_RANGE_SELECTION_STRATEGY,
} from "@angular/material/datepicker";
  
@Injectable()
export class FiveDayRangeSelectionStrategy<D> 
    implements MatDateRangeSelectionStrategy<D> {
    constructor(private _dateAdapter: DateAdapter<D>) { }
  
    selectionFinished(date: D | null): DateRange<D> {
        return this._createFiveDayRange(date);
    }
  
    createPreview(activeDate: D | null): DateRange<D> {
        return this._createFiveDayRange(activeDate);
    }
  
    private _createFiveDayRange(date: D | null): DateRange<D> {
        if (date) {
            const start = this._dateAdapter.addCalendarDays(date, -2);
            const end = this._dateAdapter.addCalendarDays(date, 2);
            return new DateRange < D > (start, end);
        }
  
        return new DateRange < D > (null, null);
    }
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [
        {
            provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
            useClass: FiveDayRangeSelectionStrategy,
        },
    ],
})
  
export class AppComponent {
    title = "AngularApp";
}

app.component.html

HTML

<div>
    <h1>GeeksforGeeks</h1>
    <h3>
        Angular Material Date range picker 
        with custom a selection strategy
    </h3>
    <mat-form-field appearance="fill">
        <mat-label>Enter a date range</mat-label>
        <mat-date-range-input [rangePicker]="picker">
            <input matStartDate placeholder="Start date">
            <input matEndDate placeholder="End date">
        </mat-date-range-input>
        <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
        <mat-datepicker-toggle matSuffix [for]="picker">
        </mat-datepicker-toggle>
        <mat-date-range-picker #picker>
        </mat-date-range-picker>
    </mat-form-field>
</div>

Выход:

Ссылка: https://material.angular.io/components/datepicker/overview

Technical Scripter Picked AngularJS

Угловой указатель даты материала

Javascript

Javascript

HTML

Javascript

Javascript

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ