wake-up-neo.com

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.

9
starlight

Momentan gibt es keine Möglichkeit, einen Datumsbereich auszuwählen, obwohl es eine Ausgabe - Anforderung gibt.

7
Edric

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.

Preview

Sie können dies in NPM überprüfen

3
Abdun Nahid

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

2
mariogarcia

Es gibt eine offene Ausgabe auf der Github-Seite.

https://github.com/angular/material2/issues/4763

Im Angular-Blog gibt es dazu auch eine Notiz (siehe Ende).

https://blog.angular.io/taking-navigation-von-the-angular-material-datepicker-237e80fa14b3

1
Oswald

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:

 Screenshot of the Material date range picker

0
H Dog

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

0
anurag619