Datumsauswahl in Angular

1. Verwenden der Datumsauswahl in Angular
2. Verwenden des input-Tags zum Erstellen einer einfachen Datumsauswahl in Angular
3. Verwenden des onChange-Ereignisses zum Abrufen des ausgewählten Datums der Datumsauswahl in Angular
4. Verwenden des onClick-Ereignisses zum Speichern des Datums nach dem Klicken auf eine Schaltfläche in Angular
5. Verwenden von DatePipe zum Ändern des Datumsformats in der Datumsauswahl in Angular

Wir werden eine einfache Möglichkeit vorstellen, eine Datumsauswahl in unserer Angular-Anwendung mit Beispielen hinzuzufügen.

Wir werden auch die Angular-Datumsauswahlbibliothek vorstellen, um eine Datumsauswahl in Angular anzuzeigen.

Verwenden der Datumsauswahl in Angular

In dieser modernen Ära der Managementsysteme ist der Datumspicker eines der häufigsten Formularelemente. Die Datumsauswahl ermöglicht es einem Benutzer, ein bekanntes Datum auszuwählen, z. B. Geburtsdatum oder Ereignisdatum.

Mit einer Datumsauswahl können wir in unserer benutzerdefinierten Benutzeroberfläche das Datum auswählen, das aus Tag, Monat und Jahr besteht. Es ist eine Variation eines Eingabeformularelements.

Lassen Sie uns ein Beispiel durchgehen, um zu verstehen, wie wir eine Datumsauswahl verwenden können, um das ausgewählte Datum für die Ereignisse onChange und onSubmit auszuwählen und abzurufen.

Der Unterschied zwischen diesen Ereignissen besteht darin, dass es besser wäre, Werte aus dem Ereignis onSubmit des Formulars zu erhalten, wenn wir mehr als ein Feld haben.

Aber wenn wir nur eine Datumsauswahl haben und das Datum erhalten möchten, sobald der Benutzer es auswählt, können wir das Ereignis onChange verwenden, um den Wert zu erhalten.

Verwenden des input-Tags zum Erstellen einer einfachen Datumsauswahl in Angular

Lassen Sie uns eine neue Anwendung erstellen, indem Sie den folgenden Befehl verwenden.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# angular
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Wir erstellen nun eine Datumsauswahl in der Datei app.component.html mit dem input-Tag.

# Angular
<input type="date" />

Diese eine Codezeile erstellt eine Datumsauswahl, wie unten gezeigt.

Ausgabe:

Wir können diese Art von Datumsauswahl also mit dieser einfachen Codezeile erstellen. Lassen Sie uns nun das ausgewählte Datum abrufen, wenn wir das Datum auswählen.

Verwenden des onChange-Ereignisses zum Abrufen des ausgewählten Datums der Datumsauswahl in Angular

In app.component.ts erstellen wir eine Funktion SendDataonChange, die ein event als Parameter und console.log die ausgewählten Daten übernimmt.

# Angular
SendDataonChange(event: any) {
console.log(event.target.value);
}

Lassen Sie uns nun diese Funktion in der Vorlage festlegen, die bei jeder Änderung des Datums ausgelöst wird.

# Angular
<input type="date" (change)="SendDataonChange($event)" />

Ausgabe:

Verwenden des onClick-Ereignisses zum Speichern des Datums nach dem Klicken auf eine Schaltfläche in Angular

Angenommen, wir möchten das Datum speichern, nachdem auf eine Schaltfläche geklickt wurde. Wir können eine Schaltfläche in app.component.html erstellen und sie mit einer in app.component.ts erstellten Funktion onClick() binden.

Unser Code in app.component.html sieht also wie folgt aus.

# Angular
<input type="date" (change)="SendDataonChange($event)" />
<br>
<button (click)="onClick()">Change</button>

Wir müssen unsere Datumsauswahl mit [(ngModel)] binden. Unser Code sieht also wie folgt aus.

# Angular
<input type="date" (change)="SendDataonChange($event)" [(ngModel)]="changed" />
<br>
<button (click)="onClick()">Change</button>

Lassen Sie uns nun etwas CSS hinzufügen, damit unsere Schaltfläche und Datumsauswahl elegant aussehen. Unser Code in app.component.css sieht also wie folgt aus.

# Angular
button {
padding: 10px;
background-color: black;
border: none;
color: white;
margin-top: 10px;
}
input{
padding: 5px;
font-size: 15px;
}

Ausgabe:

In app.component.ts definieren wir die Variable, die wir an unsere Datumsauswahl binden.

# Angular
changed: Date;

Jetzt erstellen wir eine Funktion onClick, die den Wert aus der Datumsauswahl console.log erstellt, sobald auf die Schaltfläche geklickt wird.

# Angular
onClick() {
console.log(this.changed);
}

Ausgabe:

Verwenden von DatePipe zum Ändern des Datumsformats in der Datumsauswahl in Angular

Lassen Sie uns nun besprechen, wie wir das Format des Datums ändern können.

Viele Entwickler arbeiten mit unterschiedlichen Datumsformaten fest, weil der beste Softwareentwickler Software entwickelt, die effizient und fehlerfrei arbeitet.

Der beste Weg, unser Datumsformat zu ändern, besteht darin, eine Funktion zum Speichern und Abrufen des Datums zu erstellen. Das Format in der Datenbank bleibt also gleich, aber wir können es mithilfe von Funktionen problemlos in jedem erforderlichen Format anzeigen.

Zuerst importieren wir DatePipe in app.component.ts, wie unten gezeigt.

# Angular
import { DatePipe } from '@angular/common';

Jetzt definieren wir eine neue Variable, newDate, die verwendet wird, um den Wert des Datums zu speichern, nachdem das Format geändert und zurückgegeben wurde.

Lassen Sie uns eine Funktion changeFormat() erstellen, die changed als Parameter nimmt und das Datumsformat mit DatePipe in das erforderliche Format umwandelt.

Wir werden eine Variable pipe definieren, die die Zeitzone des Datums speichert.

Unser Code in app.component.ts sieht wie folgt aus.

# Angular
import { Component, VERSION } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
changed: Date;
pipe = new DatePipe('en-US');
newDate: string;
changeFormat(changed){
let ChangedFormat = this.pipe.transform(this.changed, 'dd/MM/YYYY');
this.newDate = ChangedFormat;
}

onClick() {
console.log(this.changed);
}
SendDataonChange(event: any) {
console.log(event.target.value);
}
}

Wir werden nun den Datumswert aus unserer Funktion onClick() und console.log den neuen Datumswert mit einem neuen Format übergeben.

# Angular
onClick() {
this.changeFormat(this.changed);
console.log(this.newDate);
}

Ausgabe:

Wie Sie im obigen Beispiel sehen, wird bei der Auswahl des Datums 2022-01-19 angezeigt, aber wenn wir auf die Schaltfläche klicken, wird die Funktion changeFormat() innerhalb der Funktion onClick() und aufgerufen gibt das Datum im geänderten Format zurück.

Auf diese Weise können wir in unserer Anwendung eine Datumsauswahl verwenden, um den Datumswert bei der Auswahl des Datums zu speichern oder den Wert zu speichern, wenn auf die Schaltfläche geklickt wird. Und wir haben auch gelernt, wie wir mit DatePipe das Datumsformat ändern können.

Sie können den vollständigen Code hier überprüfen.