如何禁用角度特定日期之前的所有日期?

问题描述

我正在构建一个我总是想要endDate> startDate的组件(html，css，spec.ts，ts).我已点击此链接 https://material.angular.io/components/datepicker/overview以便进行多个日期选择器.

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.

下面是我的startDate和endDate的HTML:

Below is my HTML for startDate and endDate:

startDate:

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>

下面是我在页面加载时调用validateForm方法的角度代码(ts).

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': ['']
    });
}

问题陈述:

现在我需要做的是-如果我在startDate中选择了任何日期(例如11月23日)，那么在endDate datepicker中，应禁用11月23日之前(包括11月23日)的所有日期，以便我可以仅选择11月23日之后的日期.在Angular中可以这样做吗?

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?

我们可以通过将minDate和maxDate放置在HTML或TS中的某个位置来实现这一目标吗?

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

推荐答案

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

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

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

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

如果稍后要接收这些值，则可以使用patchValues:

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.

然后，您需要添加到第二个日期选择器中的唯一内容是[min]，就像提到的其他答案一样.利用表格控制值:

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

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