Как ограничить выбор даты будущим датчиком angular2

Question

Я не хочу позволять пользователю выбирать будущую дату в 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>

Answer 1

Вы можете использовать свойство 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() }
}

Пример работы Stackblitz

Надеюсь, это поможет!

Answer 2

Существует ограничение на используемый Angular2 сборщик.

Вот еще один лучший сборщик дат Angular 2, который соответствует вашим требованиям.

Вот ссылка

Вот шаги для реализации.

Шаг 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);
  }
}

Здесь рабочий раствор на стекаблиц