如何使用Datepicker在角度材料5.0.0中选择日期范围? [英] How to pick date range in angular material 5.0.0 with datepicker?

问题描述

我在Angular 5应用中使用最新的Angular Material 5.0.0-rc0.我正在尝试使用Angular资料随附的datepicker选择日期范围，但是我找不到与此有关的任何文档.

I am using the latest Angular Material 5.0.0-rc0 in my Angular 5 app. I am trying to select a range of dates with the datepicker provided with Angular material, but I couldn't find any documentation regarding that.

我只能使用它来选择startDate或设置minDate和maxDate.这是该代码的HTML代码

All I could work with it is to select a startDate or set the minDate and maxDate. Here's the HTML code for that

<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不同.请帮我解决这个问题.

This code helps me select one date in the range of those min and max dates but doesn't allow to select a range of them. Though using a third-party library may solve this problem, but its gonna have a different UI, which is going to be different from my current app's UI. Please help me solve this issue.

推荐答案

建议查看 Saturn材质范围Datepicker .还可以查看其演示页面.它是完整的Material UX，内置了对现有Material主题的支持.

Recommend to check out Saturn Material range Datepicker. Have a look also at their demo page. It is a full Material UX with built-in support for your existing Material theme.

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

You can install it with npm install saturn-datepicker. See their Github page for full integration instructions.

标记看起来像这样:

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

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

And here is what it ends up looking like on the page:

这篇关于如何使用Datepicker在角度材料5.0.0中选择日期范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！