web-dev-qa-db-ja.com

特定の日付より前のすべての日付を角度で無効にする方法は？

私はコンポーネント（html、css、spec.ts、ts）をangularで構築していますが、ここでは常にendDate> startDateが必要です。このリンクをたどっています https：// material .angular.io/components/datepicker/overview 複数の日付ピッカーを作成します。

以下は、startDateおよびendDateのHTMLです。

開始日：

<div class="start-date" fxFlex="50%" fxFlexOrder="1">
          <mat-form-field>
            <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        </div>

終了日：

<div class="end-date" fxFlex="50%" fxFlexOrder="2">
           <mat-form-field>
      <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
        </div>

以下は、ページのロード時にvalidateFormメソッドを呼び出しているangular code（ts））です。

ngOnInit() {
    ....
    this.validateForm();
}

validateForm() {
    this.unavailabilityForm = this.formBuilder.group({
     'startDate': ['', Validators.required],
     'endDate': ['', Validators.required],
     'unavailabilityReason': ['']
    });
}

ProblemStatement：

今、私がする必要があるのは、startDate（たとえば、11月23日）で日付を選択した場合、endDate datepickerで、11月23日以前のすべての日付を無効にする必要があるためです。 11月23日以降の日付のみを選択できます。これはAngularで行うことができますか？

minDateとmaxDateをHTMLまたはTSのどこかに配置することでそれを達成できますか？

enter image description here

htmlangularangular-materialangular-componentsangular-forms
6
john

リアクティブフォームを使用しているため、フォームコントロールを使用します。 2つのバインディング（ngModelとformControl）を使用することはお勧めしません。あなたの前の質問で提案したようにngModelをドロップしてください： https://stackoverflow.com/a/47426879/6294072

したがって、フォームコントロールにオブジェクトunavailabilityの値を入力します。

constructor(private formBuilder: FormBuilder) { 
  this.unavailabilityForm = this.formBuilder.group({
    startDate: [this.unavailability.startDate],
    endDate: [this.unavailability.endDate]
  });  
}

後で値を受け取る場合は、patchValuesを使用できます。

this.unavailabilityForm.setValue({
  startDate: this.unavailability.startDate;
  endDate: this.unavailability.endDate;
})

それ以外の場合は、フォームを作成するときに値を設定できます。

次に、2番目の日付ピッカーに追加する必要があるのは[min]他の回答のように。フォーム制御値を利用します：

<input matInput 
       [min]="unavailabilityForm.controls.startDate.value" 
       formControlName="endDate" ...>

[〜＃〜] demo [〜＃〜]

5
AJT82

[min]とのバインドは、あらゆる日付に最適です

.tsファイル

//today's date
todaydate:Date = new Date();

//any date
someDate: Date = new Date(anydate);

.htmlファイル

 <mat-form-field>
        <input matInput [matDatepicker]="picker" [min]="todayDate" placeholder="Appointment date" formControlName="appointment_date"> 
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
12
Vedha Peri

何かが足りない場合を除き、_[min]=""_ dateプロパティを使用できます。

_<div class="item item-2" fxFlex="50%" fxFlexOrder="2">
   <mat-form-field>
      <input matInput [min]="startDate" [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
</div>
_

startDateが何であっても、endDateで使用できるカレンダーの日付が制限されます。 startDateが選択される前に設定する必要がある場合は、別の変数を使用して、コンポーネントのconsturctor()またはngOnInit()で設定します。

参照： https://material.angular.io/components/datepicker/overview#date-validation

2
Milo

使った

[min] = "startDate.value"
1
estebanlobo
<mat-form-field >
    <input placeholder="Enter Date" matInput
        [matDatepicker]="picker1"
        formControlName="voucherExpirationDate"
        [min]="minDate">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker    #picker1></mat-datepicker>
</mat-form-field>
0
atul