Question

我正在以角度构建一个组件（html，css，spec.ts，ts），我总是想要endDate＆gt;开始日期。我已按照此链接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>

现在下面是我的角度代码（ts），我在页面加载时调用validateForm方法。

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

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

ProblemStatement：

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

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

Answer 1

由于您使用的是反应形式，因此请使用表单控件。不建议使用两个绑定（ngModel和formControl）。请按照我之前在你的问题中建议的那样放弃ngModel：MSDN

使用对象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" ...>

<强> https://stackoverflow.com/a/47426879/6294072

Answer 2

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

除非我遗漏了某些内容，否则您可以使用[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 4

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

您还可以看到图像，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>

Answer 5

我使用

[min]="startDate.value"

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

Answer 6

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

如何在角度特定日期之前禁用所有日期？

8 个答案: