如何禁用 angular 中特定日期之前的所有日期？

Question

我正在 angular 中构建一个组件 (html、css、spec.ts、ts)，其中我始终希望 endDate > startDate。我按照这个 link https://material.angular.io/components/datepicker/overview 来制作多个日期选择器。

下面是我的 HTML startDate 和 endDate:

开始日期：

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

下面是我的 angular 代码 (ts)，我在页面加载时调用 validateForm 方法。

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

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

问题陈述：

现在我需要做的是 - 如果我 select 编辑 startDate 中的任何日期（例如 11 月 23 日），然后在 endDate 日期选择器中编辑之前的所有日期并且包括 11 月 23 日应该被禁用，这样我只能 select 日期在 11 月 23 日之后。这可以在 Angular 中完成吗？

我们能否通过将 minDate 和 maxDate 放在 HTML 或 TS 中的某处来实现？

Answer 1

除非我遗漏了什么，否则你可以使用 [min]="" 日期属性:

<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

Answer 2

由于您使用的是反应式表单，因此请使用表单控件。不建议有两个绑定（ngModel 和 formControl）。所以像我在你之前的问题中建议的那样删除 ngModel：

所以用您的对象 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;
})

否则您可以在构建表单时设置值。

那么您唯一需要添加到第二个日期选择器的就是 [min] 就像提到的其他答案一样。那里利用表格控制值：

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

DEMO

Answer 3

我使用了

[min]="startDate.value"

并按预期工作（禁用了 endDate 日历中 startDate 日历中所选日期的先前日期）

Answer 4

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

Answer 5

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

Answer 6

这里使用 Angular 反应形式的 valueChanges 和 Min 特征是一个完整的工作解决方案，具有验证和反应形式

你也可以看到 publishedTo 只接受大于或等于你在 PublisedFrom 上设置的任何值的图像

components.ts

  export class AnnouncementformComponent implements OnInit {
   constructor(private _formBuilder: FormBuilder){}

   Announcementform: FormGroup;
   minDate:Date;

   this.Announcementform = this._formBuilder.group({

   PublishedFrom: ['', Validators.required],
   PublishedTo: ['', Validators.required],

  });
  this.Announcementform.valueChanges.subscribe(res=>{
    this.minDate = new Date(res.PublishedFrom);
  });

component.html

      <mat-form-field appearance="outline">
                <input matInput [matDatepicker]="PublishedFrom" placeholder="Publish FROM *"
                    formControlName="PublishedFrom">
                    <mat-label>Publish FROM *</mat-label>
                <mat-datepicker-toggle matSuffix [for]="PublishedFrom"></mat-datepicker-toggle>
                <mat-datepicker #PublishedFrom></mat-datepicker>
            </mat-form-field>
            <mat-form-field appearance="outline">
                <input matInput [matDatepicker]="PublishedTo" placeholder="Publish To *"
                    formControlName="PublishedTo" [min]="minDate">
                    <mat-label>Publish TO *</mat-label>
                <mat-datepicker-toggle matSuffix [for]="PublishedTo"></mat-datepicker-toggle>
                <mat-datepicker #PublishedTo></mat-datepicker>
            </mat-form-field>

如果有人需要从特定日期或大于或等于当前日期开始他的日期，我也在下面编写额外的代码可以使用下面的简单代码行

1- 在您的组件中创建一个变量 class 将其命名为例如 startDate

startDate:Date;

 ngOnInit() {
//---This will set the datepicker to accept values from current date or above---//
//--- you can also customize the value to set any date you want----//
this.startDate= new Date();
}

然后在您的 component.html 文件中

  <mat-form-field appearance="outline">
                    <input matInput [matDatepicker]="publishdate" placeholder="Publish Date *"
                        formControlName="publishdate" [min]="startDate">
                    <mat-datepicker-toggle matSuffix [for]="publishdate"></mat-datepicker-toggle>
                    <mat-datepicker #publishdate></mat-datepicker>
                </mat-form-field>

Answer 7

最新版本接受 minDate 和 maxDate 作为属性

https://material.angular.io/components/datepicker/api

<mat-calendar [minDate]="theDateYouWant"></mat-calendar>

Answer 8

第一次约会

<mat-form-field appearance="outline" class="w-100">
   <mat-label>1st installment date</mat-label>
       <input matInput [matDatepicker]="firstDate (focus)="firstDate.open()"
              placeholder="Select 1st installment date" 
              formControlName="fstInstalmentDate" readonly required>
        <mat-datepicker-toggle matSuffix [for]="firstDate"></mat-datepicker-toggle>
        <mat-datepicker #firstDate></mat-datepicker>
</mat-form-field>

第二次约会

<mat-form-field appearance="outline" class="w-100">
    <mat-label>2nd installment date</mat-label>
       <input matInput [matDatepicker]="secondDate" (focus)="secondDate.open()"
           placeholder="Select 2nd installment date" 
           [min]="settingForm?.get('fstInstalmentDate')?.value" 
           formControlName="scndInstalmentDate" readonly required>
     <mat-datepicker-toggle matSuffix [for]="secondDate"></mat-datepicker-toggle>
     <mat-datepicker #secondDate></mat-datepicker>
</mat-form-field>

这里 settingForm 是我的 formgroup 名字，第二次约会只需更改一行，无需在 .ts 文件中写入任何内容

如何禁用 angular 中特定日期之前的所有日期？

How disable all the dates before a particular date in angular?

html

angular-material

angular-components

angular

angular-forms