如何使用日期选择器在角度材料 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 选择一系列日期，但我找不到任何相关文档.

我所能做的就是选择一个startDate 或设置minDate 和maxDate.这是它的 HTML 代码

<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="选择日期"><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';@成分({选择器:'datepicker-start-view-example'，templateUrl: 'datepicker-start-view-example.html',styleUrls: ['datepicker-start-view-example.css'],})导出类 DatepickerStartViewExample {minDate = 新日期(2000, 0, 1);maxDate = 新日期(2020, 0, 1);}

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

解决方案

推荐查看

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.

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>

and TS code

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

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.

解决方案

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.

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

Markup looks like this:

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

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