如何以角度禁用特定日期之前的所有日期？答案

【问题标题】：How disable all the dates before a particular date in angular?如何以角度禁用特定日期之前的所有日期？
【发布时间】：2023-03-18 10:02:01
【问题描述】：

我正在构建一个 Angular 组件（html、css、spec.ts、ts），我总是希望 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 方法的角度代码 (ts)。

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

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

问题陈述：

现在我需要做的是 - 如果我在 startDate 中选择了任何日期（例如 11 月 23 日），那么在 endDate 日期选择器中，应该禁用 11 月 23 日之前（包括 23 日）之前的所有日期，以便我可以仅选择 11 月 23 日之后的日期。这可以在Angular中做到吗？

我们可以通过在 HTML 或 TS 中的某处放置 minDate 和 maxDate 来实现吗？

【问题讨论】：

你应该在使用formcontrols时去掉ngModel，不建议有两个绑定，而是使用表单控件，也像答案中提供的那样使用[min]，而是使用@中的formControl 987654335@ 而不是 ngModel 值。这是我的建议，它应该可以正常工作:)
@AJT_82 我应该在哪里使用 [min] ？我尝试在 TS 或 HTML 中使用，但它不起作用（可能我使用方式错误）。能否指点一下如何正确使用它？
在模板中使用它，就像在回答中一样。不要在 TS 中使用它，它用于不同的目的（数字）
@AJT_82 我试过了。它没有用。
@AJT_82 我已经编辑了我的问题。如果有帮助，请告诉我。

标签： html angular angular-material angular-components angular-forms

【解决方案1】：

第一次约会

<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 文件中写入任何内容

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

在这里使用 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- 在你的组件类中创建一个变量，例如 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>

【讨论】：

【解决方案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>

【讨论】：

完美运行...谢谢
这为我节省了很多代码行。就我而言，我只希望开始日期是最小日期，所以我改变了它，一切正常。

【解决方案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>

【讨论】：

欢迎来到 SO！当你回答一个问题时，试着解释一下。在这种情况下，还有更多答案，所以请公开您的优点。

【解决方案6】：

我用过

[min]="startDate.value"

并按预期工作（从 startDate 日历中的选定日期禁用 endDate 日历以前的日期）

【讨论】：

【解决方案7】：

由于您使用的是响应式表单，因此请使用表单控件。不建议使用两个绑定（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;
})

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

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

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

DEMO

【讨论】：

成功了。今后，我不会使用两个绑定。
很高兴听到它成功了！是的，最好不要使用两个绑定，这有时会导致意外问题:)
你还在吗？
是的，我正在准备工作 :) 如果是关于您所链接的问题，css 不是我的强项 :D，我只在 SO 上玩过材料。
您好，先生，请帮帮我。我们如何禁用“ ??? 的先前日期

【解决方案8】：

除非我遗漏了什么，否则您可以使用 [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

【讨论】：

我在添加 [min]="startDate" 后收到以下错误。 Uncaught Error: Template parse errors: Can't bind to 'min' since it isn't a known property of 'mat-datepicker-toggle'. 1. If 'mat-datepicker-toggle' is an Angular component and it has 'min' input, then verify that it is part of this module. 2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
关于如何解决此错误的任何想法？我对 Angular 比较陌生。
@john 抱歉把它放在元素上
这就是我们之前所做的？
@john 抱歉，我刚刚检查了文档，它在 <input matInput> 元素上。我做了另一个编辑