如何使用datepicker在angular material 5.0.0中拾取日期范围？

我正在Angular 5应用程序中使用最新的

Angular Material 5.0.0-rc0

。我试图用带有角度材质的

日期选择器选择一系列日期，但我找不到任何相关文档

我所能做的就是选择一个
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>

此代码帮助我在最小和最大日期范围内选择一个日期，但不允许选择其中的一个范围。虽然使用第三方库可能会解决这个问题，但它将有一个不同的UI，这将不同于我当前应用程序的UI。请帮助我解决此问题。
目前无法选择日期范围，尽管有人请求这样做。
github页面有一个未解决的问题


在Angular博客中，也有这样一个注释（请看结尾）


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

同时，你可以有两个日期选择器。一个用于开始日期，一个用于结束日期。大概是这样的：

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

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

//开始日期日期选择器
//结束日期选取器

如果他们将
endDate
更改为
startDate
之前的某个日期，则会显示错误或重置
startDate
建议签出。也看看他们的。这是一个完整的材料用户体验，内置了对现有材料主题的支持

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

标记如下所示：

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

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



下面是它在页面上的最终外观：

在角材质7.0.0中甚至不可能实现。有不同的插件可以做到这一点。我想出了ngx aaa日期选择器。这对我有用


您可以在
中查看这一点。完全可以这样做，但不能直接使用mat datepicker组件。
实际上，mat datepicker使用mat菜单组件来显示mat日历组件

要执行您的要求，您可以使用以下内容

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

在您的.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;
}

现在有角材质v10.0.1或更高版本

2018年4月-您仍然无法选择日期范围。2019年3月-您仍然无法选择日期范围。通用材料开发商承诺在v8.0中发布它，它在v8中实现了吗？将仅在v10 hi中发布，您能告诉我您是如何创建
动画gif
文件的吗？使用桌面工具有没有办法定义最大日期范围？例如，所选范围不能超过30天。@H Dog您知道如何将此范围内的每个日期保存到数据库中吗？嘿！你救了我一天！日期范围选择器将在角度材料10中发布。时间是否也有类似的内容？