如何限制 angular2-date-picker 未来日期选择答案

【问题标题】：How to restrict angular2-date-picker future date selection如何限制 angular2-date-picker 未来日期选择
【发布时间】：2019-07-06 22:03:14
【问题描述】：

我不想让用户在 angular2-date-picker 中选择未来的日期，我怎样才能实现这种行为？我的代码如下。

<div class="col-md-6 col-lg-6 col-sm-12">
   <div>
     <label>From
        <angular2-date-picker
          [(ngModel)]="fromDate"
          [settings]="settings"
          (click)="customizeFromDatePicker()"
        ></angular2-date-picker
     ></label>
   </div>
    <div>
      <label
        >To
        <angular2-date-picker
          [(ngModel)]="toDate"
          [settings]="settings"
          (click)="customizeToDatePicker()"
        ></angular2-date-picker
      ></label>
    </div>
 </div>

【问题讨论】：

angular2-date-picker 有限制请查看下面的答案，这将解决您的问题
如果您认为提供的解决方案解决了您的问题，那么您可以接受答案，以便其他人从中受益。谢谢

标签： angular validation date datepicker

【解决方案1】：

您使用的 angular2 选择器存在限制。

这是另一个适合您要求的最佳 Angular 2 日期选择器。

Here is link

以下是实施步骤。

第 1 步：安装库：npm install angular2-datepicker

第 2 步：在 AppModule 中导入模块：

import {MyDatePickerModule} from 'mydatepicker';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MyDatePickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

第 3 步：app.component.html

<form [formGroup]="datepickerForm" novalidate>
    <my-date-picker name="mydate" 
            [options]="myDatePickerOptions"
            formControlName="startDate"
            (dateChanged)="onDateChanged($event)">
      </my-date-picker>
  <!-- other controls are here... -->
  <button (click)="showSelectedDate()">Submit</button>
</form>

第 4 步：app.component.ts

export class AppComponent {
  name = 'Angular 5';
  datepickerForm: FormGroup;
  selectedDate: any;
  myDatePickerOptions: any;

  constructor(public _formBuilder: FormBuilder) {
    this.datepickerForm = this._formBuilder.group({
      'startDate': [null, Validators.required]
    });
  }

  ngOnInit() {
    this.myDatePickerOptions = {
      dateFormat: 'dd-mm-yyyy',
      disableUntil : {year: 2016, month: 7, day: 22},
      disableSince :  {year: 2019, month: 4, day: 22}
    }
  }

  showSelectedDate() {
    let date: any = this.datepickerForm.controls['startDate'].value;
    this.selectedDate = date.formatted;
    console.log(this.selectedDate);
  }

  onDateChanged(event) {
    console.log(event);
  }
}

Here working solution on stackblitz

【讨论】：

【解决方案2】：

您可以使用属性disableSince。

在这样做之前，您可能希望先获取未来日期：

get tomorrowDate(): Date {
   const todayDate = new Date();
   const tomorrowDate = new Date(todayDate.getTime() + 24 * 60 * 60 * 1000);

   return tomorrowDate;
}

之后，您可以插入disableSince 属性使其工作：

this.myDatePickerOptions = {
   dateFormat: 'dd-mm-yyyy',
   disableSince: { year: this.tomorrowDate.getFullYear(), month: this.tomorrowDate.getMonth() + 1, day: this.tomorrowDate.getDate() }
}

Working Stackblitz Example

希望这会有所帮助！

【讨论】：

这是给 my-date-picker 的，实际上我希望在 angular2-date-picker 中做同样的事情，无论如何感谢您的帮助。