web-dev-qa-db-ja.com

マテリアルカレンダーで最大日付と最小日付を選択する方法

マテリアルカレンダーを使用していて、ユーザーに1か月の日付のみを選択させたい。 minDataおよびmaxDateフィールドを使用しています。 minDateは機能していますが、maxDateは機能していません。

exmple.component.html

<mat-calendar [selected]="selectedDate" (selectedChange)="onCalendarSelectedChange($event)" [minDate]="today" [maxDate]="maxDate"></mat-calendar>

ここに与えられたリンクがあります：

https://angular-pknsri.stackblitz.io

私を助けてください。

javascriptangularangular-materialmaterial-design
3
Sampat Singh

実際、あなたはスタックブリッツをアニルの答えで変えています。だから私はおそらく間違っていたかもしれないものを更新しています。最小と最大の2つの異なる日付オブジェクトを個別に作成する必要があります。

 var minCurrentDate = new Date();
    var maxNewDate = new Date();
    this.minDate = minCurrentDate;
    this.maxDate  = maxNewDate.setMonth(maxNewDate.getMonth()+1);

    // this.minDate = new Date(2000, 0, 1);
    // this.maxDate = new Date(2020, 0, 1);
    console.log(this.maxDate, minCurrentDate,maxNewDate, maxNewDate.getMonth());

現在の日付でsetMonth（）を実行すると、min dateの参照も変更されました。 minDateとmax dateの両方が同じものを指しています。すべてのオブジェクトが同じになった後、参照のみが変更されました。したがって、2つの異なるオブジェクトを作成して確認してください。

PS：ファーハットが私を競争させた：P。見なかった。

3
KiraAG

hTMLで

<mat-form-field class="example-full-width">
  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

tsファイル

 minDate = new Date(2000, 0, 1);
  maxDate = new Date(2020, 0, 1);

リファレンス https://material.angular.io/components/datepicker/examples

1
Anil Kumar Reddy A

以下は、あなたに役立つ日付ピッカーの例です： StackBlitz HERE

0
Quentin