如何以角度禁用特定日期之前的所有日期? [英] How disable all the dates before a particular date in angular?

问题描述

我正在构建一个 angular 组件(html、css、spec.ts、ts)，其中我总是希望 endDate > startDate.我已经点击了这个链接

解决方案

由于您使用的是反应式表单，因此请使用表单控件.不建议有两个绑定(ngModel 和 formControl).所以删除 ngModel 就像我在之前的问题中建议的那样:https://stackoverflow.com/a/47426879/6294072

因此，使用来自对象 unavailability 的值填充表单控件.

constructor(private formBuilder: FormBuilder) {this.unavailabilityForm = this.formBuilder.group({开始日期:[this.unavailability.startDate]，结束日期:[this.unavailability.endDate]});}

如果您稍后收到值，您可以使用 patchValues:

this.unavailabilityForm.setValue({开始日期:this.unavailability.startDate;结束日期:this.unavailability.endDate;})

否则您可以在构建表单时设置这些值.

那么您唯一需要添加到第二个日期选择器的是 [min] 就像提到的其他答案一样.有利用表单控件值:

演示

I am building a component (html, css, spec.ts, ts) in angular in which I always want endDate > startDate. I have followed this link https://material.angular.io/components/datepicker/overview in order make multiple datepickers.

Below is my HTML for startDate and endDate:

startDate:

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

endDate:

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

Now below is my angular code (ts) where I am calling validateForm method on the page load.

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

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

ProblemStatement:

Now what I need to do is - if I have selected any date in startDate (for example 23rd Nov), then in the endDate datepicker all the dates before and including 23rd Nov should be disabled so that I can only select dates after 23rd Nov only. Is this possible to do in Angular?

Can we achieve that by placing minDate and maxDate somewhere in HTML or TS ?

解决方案

Since you are using a reactive form, utilize the form controls. It's not recommended to have two bindings (ngModel and formControl). So drop the ngModel like I suggested in a previous question of yours: https://stackoverflow.com/a/47426879/6294072

So populate your form controls with the values of from your object unavailability.

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

if you are receiving the values at a later point you can use patchValues:

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

else you can set the values when you build the form.

Then the only thing you need to add to your second datepicker is [min] like the other answer mentioned. There utilize the form control value:

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

DEMO

这篇关于如何以角度禁用特定日期之前的所有日期?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！