Angular-Material DateTime Picker-Komponente

1. DateTime-Picker mit Angularmaterialabhängigkeit
2. Andere Methoden zum Erstellen der DateTime-Picker-Komponente

Die Datepicker-Komponente ist eine der Komponenten, die in Situationen verwendet wird, in denen wir unsere Formulare für persönliche Informationen ausfüllen.

Es ist eine Komponente, die in Fällen verwendet wird, in denen wir unser Geburtsdatum auf einer Seite auswählen oder den Tag ausfüllen möchten, an dem wir einen Job begonnen und den Job beendet haben.

Wir stoßen auf verschiedene Fälle, in denen wir die Picker-Komponente DateTime auf Webseiten sehen. Lassen Sie uns nun lernen, wie man es mit Angularmaterialabhängigkeit implementiert.

DateTime-Picker mit Angularmaterialabhängigkeit

Die Angular Material-UI ist die Goto-Bibliothek für gebrauchsfertige Komponenten, und wir werden sie beim Erstellen des DateTime-Pickers einsetzen.

Navigieren Sie nach dem Erstellen eines neuen Angular-Projekts durch den Projektordner und installieren Sie Material mit ng add @angular/material. Nun zum Codierungsteil, wir navigieren zu src>>app, suchen die Datei app.component.html und geben diese Codes ein:

Code-Snippet für app.component.html:

<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>

Hier erstellen wir die grundlegende Struktur und das Verhalten der Picker-Komponente DateTime.

Wir müssen einige Abhängigkeiten von Angularmaterial in die Datei app.module.ts importieren. Dadurch wird unsere DateTime-Picker-Komponente funktionsfähig.

Code-Snippet für app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatNativeDateModule} from '@angular/material/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Was wir hier getan haben, ist, die notwendigen Abhängigkeiten in app.module.ts zu importieren. Da wir innerhalb der Datei app.component.ts keine Änderungen vornehmen würden, lassen wir sie so wie sie ist.

Auf diese Weise erhalten wir die folgende Ausgabe:

Andere Methoden zum Erstellen der DateTime-Picker-Komponente

Aus Gründen der Abwechslung, Erforschung und des Lernens werden wir andere Methoden besuchen, die wir verwenden können, um eine DateTime-Picker-Komponente zu entwerfen.

DateTime-Picker-Komponente mit ng-bootstrap-Bibliothek

Wie das Angular-Material ist auch ng-bootstrap eine beliebte Bibliothek, die Widgets und Abhängigkeiten für das Angular-Framework bereitstellt. Genauso einfach lässt sich die Picker-Komponente DateTime implementieren.

Im Projektordner der neu erstellten Angularanwendung, die wir erstellt haben, installieren wir ng-bootstrap, indem wir Folgendes eingeben: ng add @ng-bootstrap/ng-bootstrap.

Dann beginnen wir mit der Struktur und dem Verhalten der Komponente; Wir gehen in die Datei app.component.html, um diese mit Codes zu erstellen.

Code-Snippet für app.component.html:

<p>Simple datepicker</p>
<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
<hr/>
<button class="btn btn-sm btn-outline-primary me-2" (click)="selectToday()">Select Today</button>
<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo()">To current month</button>
<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button>
<hr/>
<pre>Month: {{ date.month }}.{{ date.year }}</pre>
<pre>Model: {{ model | json }}</pre>

Mit diesem Code werden wir feststellen, dass das ausgewählte Datum unter der Komponente angezeigt wird; Dieses Verhalten wird mit den letzten beiden Codezeilen erstellt.

Wir müssen uns nun auf die Funktionalität der Picker-Komponente DateTime konzentrieren. Dazu navigieren wir zur Datei app.component.ts und geben diese Codes ein.

Code-Snippet für app.component.ts:

import {Component} from '@angular/core';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'timetwo';
  model: NgbDateStruct;
  date: {year: number, month: number};
  constructor(private calendar: NgbCalendar) {
  }
  selectToday() {
    this.model = this.calendar.getToday();
  }
}

Was wir mit diesem Code tun, ist der Versuch, das Verhalten der Picker-Komponente DateTime so zu definieren, dass bei Auswahl des Datums die Funktion selectToday() das Modell in app.component.html aktiviert, das gedruckt wird die von uns gewählten Termine.

Der letzte Teil befasst sich mit der Verwaltung der Abhängigkeiten, die wir von ng-bootstrap installiert haben. In der Datei app.module.ts erstellen wir diese Codes.

Code-Snippet für app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Wir erhalten die folgende Ausgabe, nachdem wir den gesamten Code für diesen Abschnitt geschrieben haben:

DateTime Picker mit ng2 NPM

Die letzte Methode, an der wir arbeiten wollen, ist die ng2-Bibliothek, die uns eine hochgradig konfigurierbare Datumsauswahlkomponente für das Angular Framework zur Verfügung stellt.

In unserem neuen Projektordner installieren wir die Bibliothek ng2, indem wir Folgendes eingeben: npm i ng2-date-picker. Nach der Installation gehen wir in die Datei app.component.html und geben die Codes ein, die die Struktur und das Verhalten der Webseite entwerfen.

Code-Snippet für app.component.html:

<dp-date-picker theme="dp-material"
[config]="datePickerConfig" required="true">
</dp-date-picker>
<br />
<input type="button" (click)="updateFormat()"  value="update date picker format" />
<br />
format : {{datePickerConfig.format}}

Jetzt gehen wir zur Datei app.component.ts, um weitere Kodierungen vorzunehmen und die Funktionalität in unsere Picker-Komponente DateTime zu bringen.

Code-Snippet für app.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from "@angular/forms";
import moment from 'moment'
import { IDayCalendarConfig, DatePickerComponent } from "ng2-date-picker";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'timethree';
  datePickerConfig = {
    format: 'DD'
  };
  updateFormat() {
    console.log('update')
    this.datePickerConfig = {
      ...this.datePickerConfig,
      format: 'DD-MM-YYYY'
    }
  }
}

Zuerst importieren wir einige der ng2-Module in die app.component.ts-Datei; Wir werden die restlichen Module in die Datei app.module.ts importieren.

Dann verwenden wir die Funktion updateFormat(), um das Datum anzuzeigen, das wir unter der Picker-Komponente DateTime auswählen.

Als nächstes arbeiten wir an der Datei app.module.ts, in die wir die restlichen Module importieren, die wir aus der ng2-Bibliothek benötigen.

Code-Snippet für app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DpDatePickerModule } from "ng2-date-picker";
@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule, DpDatePickerModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Damit die App funktioniert, müssen wir schließlich diese Konfiguration hinzufügen: "allowSyntheticDefaultImports": true in der Datei tsconfig.json unseres Projektordners.

Wir sehen die folgende Ausgabe, nachdem wir alle Schritte für den Abschnitt erfolgreich ausgeführt haben: