Wie wähle ich den Datumsbereich in eckigem Material 5.0.0 mit datepicker aus?
Ich verwende den neuesten Angular Material 5.0.0-rc0 in meiner App Angular 5. Ich versuche, mit der mit Angular-Material gelieferten datepicker einen Datumsbereich auszuwählen, aber ich konnte dazu keine Dokumentation finden.
Alles, was ich damit arbeiten könnte, ist, eine startDate auszuwählen oder minDate und maxDate einzustellen. Hier ist der HTML-Code dafür
<mat-form-field>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
und TS-Code
import {Component} from '@angular/core';
@Component({
selector: 'datepicker-start-view-example',
templateUrl: 'datepicker-start-view-example.html',
styleUrls: ['datepicker-start-view-example.css'],
})
export class DatepickerStartViewExample {
minDate = new Date(2000, 0, 1);
maxDate = new Date(2020, 0, 1);
}
Dieser Code hilft mir bei der Auswahl eines Datums im Bereich dieser Mindest- und Höchstwerte, es ist jedoch nicht möglich, einen Bereich davon auszuwählen. Die Verwendung einer Bibliothek eines Drittanbieters kann dieses Problem zwar lösen, es wird jedoch eine andere Benutzeroberfläche verwendet, die sich von der Benutzeroberfläche der aktuellen App unterscheidet. Bitte helfen Sie mir, dieses Problem zu lösen.
Momentan gibt es keine Möglichkeit, einen Datumsbereich auszuwählen, obwohl es eine Ausgabe - Anforderung gibt.
Es ist sogar in Angular Material 7.0.0 nicht möglich. Es gibt verschiedene Plugins dafür. Ich habe mir ngx-aaa-datepicker ausgedacht . Es hat bei mir funktioniert.
Sie können dies in NPM überprüfen
In der Zwischenzeit könnten Sie nur zwei Datumsauswahlfunktionen verwenden. Eine für das Startdatum und eine für das Enddatum. Etwas wie das:
<mat-form-field> //start date datepicker
<input matInput [min]="minDate" [max]="maxDate" [formControl]="startDate" [matDatepicker]="picker" placeholder="Choose a start date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="minDate"></mat-datepicker>
</mat-form-field>
<mat-form-field> //end date datepicker
<input matInput [min]="startDate" [max]="maxDate" [formControl]="endDate" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
Sie könnten dann einige haben, wenn sie die endDate in etwas ändern, bevor die startDate ihnen einen Fehler anzeigt oder die startDate zurücksetzt
Es gibt eine offene Ausgabe auf der Github-Seite.
Im Angular-Blog gibt es dazu auch eine Notiz (siehe Ende).
https://blog.angular.io/taking-navigation-von-the-angular-material-datepicker-237e80fa14b3
Zum Auschecken empfehlen Saturn Materialauswahl Datepicker . Schau auch auf ihre Demo-Seite . Es ist eine vollständige Material UX mit integrierter Unterstützung für Ihr vorhandenes Material-Design.
Sie können es mit npm install saturn-datepicker installieren. Siehe ihre Github-Seite für vollständige Anweisungen zur Integration.
Markup sieht so aus:
<mat-form-field>
<input matInput
placeholder="Choose a date"
[satDatepicker]="picker"
[value]="date">
<sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
<sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
</mat-form-field>
Und so sieht es auf der Seite aus:
Die Angular-Version der Angular UI Bootstrap-Bibliothek verfügt über eine Datumsauswahl, die Sie überprüfen können. Ich verwende es in meinen Projekten.
https://ng-bootstrap.github.io/#/components/datepicker/examples