如何以角度禁用特定日期之前的所有日期？
Posted
技术标签:
【中文标题】如何以角度禁用特定日期之前的所有日期？【英文标题】：How disable all the dates before a particular date in angular? 【发布时间】：2022-01-22 18:51:11 【问题描述】：我正在构建一个 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 我已经编辑了我的问题。如果有帮助，请告诉我。
【参考方案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://***.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 抱歉把它放在 <input matInput> 元素上。我做了另一个编辑以上是关于如何以角度禁用特定日期之前的所有日期？的主要内容，如果未能解决你的问题，请参考以下文章