如何使用datepicker在角度材料5.0.0中选择日期范围？

Question

我正在使用Angular Material 5.0.0-rc0Angular 5应用程序中的最新版本.我试图datepicker用Angular材料提供一系列日期,但我找不到任何关于它的文档.

我可以使用它是选择一个startDate或设置minDate和maxDate.这是HTML代码

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

和TS代码

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);
}

此代码可帮助我选择最小和最大日期范围内的一个日期,但不允许选择它们的范围.虽然使用第三方库可以解决这个问题,但它会有一个不同的UI,这将与我当前的应用程序的UI不同.请帮我解决这个问题.

Answer 1

推荐检查土星的物质范围Datepicker。看看他们的演示页面。它是完整的Material UX，并内置支持您现有的Material主题。

您可以使用安装它npm install saturn-datepicker。有关完整的集成说明，请参见其Github页面。

标记看起来像这样：

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

这就是页面上最终的样子：

Answer 2

目前没有可能的方法来选择一系列日期,尽管有一个问题要求.

Answer 3

同时，您可能只有两个日期选择器。一个用于开始日期，一个用于结束日期。像这样：

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

然后，如果他们将更endDate改为某种内容，然后startDate显示错误或重置startDate

Answer 4

在 Angular Material 7.0.0 中甚至是不可能的。有不同的插件可以做到这一点。我想出了ngx-aaa-datepicker。它对我有用。

你可以在NPM 中查看