web-dev-qa-db-ja.com

datepickerでangular material 5.0.0の日付範囲を選択するには？

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

このコードは、これらの最小日付と最大日付の範囲で1つの日付を選択するのに役立ちますが、それらの範囲を選択することはできません。サードパーティのライブラリを使用することでこの問題を解決できる場合もありますが、そのUIは別のUIになり、現在のアプリのUIとは異なります。この問題の解決を手伝ってください。

angulardatepickerangular-materialangular-material2
14
starlight

チェックアウトすることをお勧めします 土星材料の範囲の日付ピッカー 。 デモページ もご覧ください。既存のマテリアルテーマのサポートが組み込まれた完全なマテリアルUXです。

npm install saturn-datepickerでインストールできます。完全な統合手順については、 Githubページ を参照してください。

マークアップは次のようになります。

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

そして、ページ上で最終的には次のようになります。

Screenshot of the Material date range picker

8
H Dog

現在、日付の範囲を選択する方法はありませんが、リクエストする issue があります。

7
Edric

それまでの間、日付ピッカーを2つだけ持つことができました。 1つは開始日用で、もう1つは終了日用です。このようなもの：

<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がリセットされる場合があります。

4
mariogarcia

Githubページで未解決の問題があります。

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

Angular-Blogには、これに関するメモもあります（最後を見てください）。

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

3
Oswald

Angular Material 7.0.0。そうするための異なるプラグインがあります。私はngx-aaa-datepickerそれは私のために働いた。

Preview

これは [〜＃〜] npm [〜＃〜] で確認できます。

3
Abdun Nahid

AngularのバージョンAngular UI Bootstrapライブラリには日付範囲セレクタがあり、それを確認できます。私のプロジェクトでそれを使用しています。

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

2
anurag619