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

Question

我在我的 Angular 5 应用程序中使用最新的 Angular Material 5.0.0-rc0。我正在尝试使用 Angular 材料提供的 datepicker 选择一系列日期，但我找不到任何相关文档。

我只能选择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

建议查看Saturn Material range Datepicker。也看看他们的demo page。它是一个完整的 Material UX，内置支持您现有的 Material 主题。

您可以使用npm install saturn-datepicker 安装它。有关完整的集成说明，请参阅 their Github page。

标记如下所示：

  <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

目前无法选择日期范围，尽管issue 要求这样做。

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查看这个

Answer 5

github 页面上有一个未解决的问题。

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

在 Angular-Blog 中，对此也有注释（请看末尾）。

https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3

Answer 6

Angular UI Bootstrap 库的 Angular 版本有一个日期范围选择器，您可以查看它。我在我的项目中使用它。

https://ng-bootstrap.github.io/#/components/datepicker/examples

Answer 7

现在在 Angular Material v10.0.1 或更高版本中可用

https://material.angular.io/components/datepicker/overview#date-range-selection

Answer 8

完全可以做到这一点，但不能直接使用 mat-datepicker 组件。 实际上，mat-datepicker 使用 mat-menu 组件来显示 mat-calendar 组件。

要执行您的要求，您可以使用如下所示的内容。

在您的 component.html 文件中

<mat-menu #startDateRangeMenu="matMenu">
  <mat-calendar 
      #calendar 
      (click)="$event.stopPropagation()"
      (selectedChange)="toggleStartDateDate($event, calendar)"
      [dateClass]="isStartDateDateSelected()">
  </mat-calendar>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="startDateRangeMenu">
   {{'startDate' | translate}}
</button>

在您的 .ts 文件中

isStartDateSelected() {
    return (date: Date): MatCalendarCellCssClasses => {
      const dateMoment = moment(date);
      let startDate;
      let endDate;
      if (this.startDateAfter) {
        startDate = moment(this.startDateAfter);
      }
      if (this.startDateBefore) {
        endDate = moment(this.startDateBefore);
      }

      if (startDate && endDate && dateMoment.isBetween(startDate, endDate, 'days', '[]')) {
        return 'date-selected';
      } else if (startDate && dateMoment.isSame(startDate)) {
        return 'date-selected';
      } else if (moment().startOf('day').isSame(moment(date).startOf('day'))) {
        return 'today';
      }
      return;
    };
  }

 toggleStartDateDate(date: any, calendar: any) {
    const dateString = moment(date).format('YYYY-MM-DD');
    if (this.selectStartDateType === 'startDateAfter') {
      this.startDateAfter = dateString;
      this.startDateBefore = dateString;
      this.selectStartDateType = 'startDateBefore';
    } else {
      if (moment(date).isBefore(moment(this.startDateAfter))) {
        this.startDateAfter = dateString;
        this.startDateBefore = dateString;
        this.selectStartDateType = 'startDateBefore';
      } else {
        this.startDateBefore = dateString;
        this.selectStartDateType = 'startDateAfter';
      }
    }
    calendar.updateTodaysDate();
  }

在您的 .css 文件中

::ng-deep .date-selected .mat-calendar-body-cell-content {
  background-color: #17a2b8;
  color: white;
}

::ng-deep .date-selected.mat-calendar-body-cell:hover .mat-calendar-body-cell-content {
  background-color: #17a2b8 !important;
}

Answer 9

也许这可以帮助你：

<mat-form-field>
    <mat-label>Custom date</mat-label>
    <input matInput type="datetime-local">
</mat-form-field> 

Answer 10

是的，可以使用mat-calendar。您需要使用DateRange 并将其传递给mat-calendar 的selected 属性。 完成此操作后，您需要在mat-calendar 的selectedChange 方法上处理一些情况。工作示例如下：

在html文件中

 <mat-calendar [selected]="selectedDate"
                          (selectedChange)="onSlotChange($event)">
 </mat-calendar>

在ts文件中声明并添加如下方法

selectedDate: DateRange<Date>;
      
     onSlotChange(changedDate: Date) {
        if (!this.selectedDate) {
            this.selectedDate = new DateRange(changedDate, changedDate);
        } else if (this.selectedDate.start > changedDate && !this.selectedDate.end) {
            this.selectedDate = new DateRange(changedDate, this.selectedDate.start);
        } else if (this.selectedDate.start > changedDate && this.selectedDate.end) {
            this.selectedDate = new DateRange(changedDate, this.selectedDate.end);
        } else {
            this.selectedDate = new DateRange(this.selectedDate.start, changedDate);
        }
    }

这将完成您的工作。万事如意！