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

目前无法选择一系列日期，但有issue请求。

Answer 2

建议签出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 3

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

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

在Angular-Blog中，也有一个注释（看看结尾）。

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

Answer 4

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

您可以在NPM

中查看

Answer 5

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

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

Answer 6

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

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

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

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

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

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

8 个答案: