Html 如何以角度禁用特定日期之前的所有日期？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47462222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How disable all the dates before a particular date in angular?
提问by john
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/overviewin order make multiple datepickers.
我正在以 angular 构建一个组件（html、css、spec.ts、ts），其中我总是想要 endDate > startDate。我已按照此链接https://material.angular.io/components/datepicker/overview制作多个日期选择器。
Below is my HTML for startDateand endDate:
下面是我的 HTMLstartDate和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 validateFormmethod on the page load.
现在下面是我validateForm在页面加载时调用方法的角度代码（ts）。
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 endDatedatepicker 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?
现在我需要做的是 - 如果我选择了任何日期startDate（例如 11 月 23 日），那么在endDate日期选择器中，应禁用 11 月 23 日之前（包括 23 日）的所有日期，以便我只能选择 11 月 23 日之后的日期。这可以在 Angular 中做到吗？
Can we achieve that by placing minDateand maxDatesomewhere in HTML or TS ?
我们可以通过在 HTML 或 TS 中放置minDateand 来实现maxDate吗？
采纳答案by AJT82
Since you are using a reactive form, utilize the form controls. It's not recommended to have two bindings (ngModeland formControl). So drop the ngModellike I suggested in a previous question of yours: https://stackoverflow.com/a/47426879/6294072
由于您使用的是反应式表单，因此请使用表单控件。不建议有两个绑定（ngModel和formControl）。所以放弃ngModel我在你之前的问题中建议的那样：https: //stackoverflow.com/a/47426879/6294072
So populate your form controls with the values of from your object unavailability.
所以用你的对象中的值填充你的表单控件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:
如果您稍后收到这些值，您可以使用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:
然后，您唯一需要添加到第二个日期选择器的内容[min]就像提到的其他答案一样。有利用表单控件值：
<input matInput
[min]="unavailabilityForm.controls.startDate.value"
formControlName="endDate" ...>
回答by Vedha Peri
Binding with [min] works perfect for any date
与 [min] 绑定适用于任何日期
.ts file
.ts 文件
//today's date
todayDate:Date = new Date();
//any date
someDate: Date = new Date(anydate);
.html file
.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>
回答by Milo
Unless I'm missing something, you can use the [min]=""date property:
除非我遗漏了什么，否则您可以使用[min]=""date 属性：
<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>
Whatever startDateis will limit the Calendar dates available for endDate. If you need it set before startDateis chosen, use another variable and set it in consturctor()or ngOnInit()of your component.
无论startDate是什么都会限制可用于 的日历日期endDate。如果您需要将其设置之前startDate被选中，使用另一个变量并将其设置consturctor()或ngOnInit()您的组件。
See: https://material.angular.io/components/datepicker/overview#date-validation
请参阅：https: //material.angular.io/components/datepicker/overview#date-validation
回答by estebanlobo
I used
我用了
[min]="startDate.value"并按预期工作（从 startDate Calendar 中的选定日期禁用 endDate 日历以前的日期）
回答by MJVM
Using the valueChanges of Angular reactive forms and Min feature here is a complete working solution with validation and reactive forms
在这里使用 Angular 反应形式的 valueChanges 和 Min 功能是一个完整的工作解决方案，包括验证和反应形式
you can also see the image that the publishedTo only accepts values greater than or equal to any values you set on the PublisedFrom
您还可以看到publishedTo 只接受大于或等于您在PublisedFrom 上设置的任何值的图像
components.ts
组件.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
组件.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>
I am also writing additional code below if someone needs to start his date from a specific date or greater or equal to current date can use simple line of code below
如果有人需要从特定日期或大于或等于当前日期开始他的日期，我还在下面编写其他代码可以使用下面的简单代码行
1- create a variable in your component class name it for example startDate
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();
}
then in your component.html file
然后在你的 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>
回答by atul
<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>
