Angular 5 - Горячая программно изменить дату выбора даты

Question

У меня есть два выбора даты: дата начала и дата окончания. Я хочу проверить, какие даты выбраны, чтобы запретить пользователю выбирать дату начала, большую, чем дата окончания, и дату окончания, меньшую, чем дата начала.

<mat-form-field class="my-datepicker">
    <input matInput [matDatepicker]="pickerstart" placeholder="Choose start date" [max]="today" [formControl]="startDate">
    <mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
    <mat-datepicker #pickerstart></mat-datepicker>
</mat-form-field>
<mat-form-field class="my-datepicker">
    <input matInput [matDatepicker]="pickerend" placeholder="Choose end date" [max]="today"  [formControl]="endDate">
    <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
    <mat-datepicker #pickerend></mat-datepicker>
</mat-form-field>

Как программно установить даты для достижения этого результата?

Answer 1

Проверьте это: https://material.angular.io/components/datepicker/overview#setting-the-calendar-starting-view

Если вы храните дату окончания как endDate , то, например:

<mat-datepicker ... [startAt]="endDate"></mat-datepicker>

Или как Datepicker с минимальной и максимальной проверкой пример: https://material.angular.io/components/datepicker/examples

<input matInput [min]="endDate" ... >

Или даже более общий, используя Datepicker с проверкой фильтра пример по ссылке выше.

Подробнее о том, как использовать min / max и filter : https://material.angular.io/components/datepicker/overview#date-validation

Answer 2

Вам нужно немного изменить свой код. В HTML:

<mat-form-field >
  <input matInput [matDatepicker]="pickerstart" placeholder="Choose start date" [max]="today<endDate|| endDate == undefined?today:endDate"  [(ngModel)]="startDate" >
  <mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
  <mat-datepicker #pickerstart></mat-datepicker>
</mat-form-field>
<mat-form-field >
  <input matInput [matDatepicker]="pickerend" placeholder="Choose end date" [max]="today" [min]="startDate"   [(ngModel)]="endDate"  >
  <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
  <mat-datepicker #pickerend></mat-datepicker>
</mat-form-field>

В файле TS:

today = new Date();
 ngOnInit() {
    this.today = JSON.parse(JSON.stringify(this.today)).substring(0, 10);
}

Answer 3

Попробуй, у меня работа HTML-код:

  <div class="row">
    <div class="input-field col s12">
      <input formControlName="contratedate" id="contratedate" type="date" class="datepicker" materialize="pickadate" [materializeParams]="[{ format: 'yyyy-mm-dd', formatSubmit: 'yyyy-mm-dd',
        closeOnSelect: true, selectMonths: true, selectYears: true, today: '',
        max: true, onSet: onSetDatepicker }]">
      <label for="contratedate">Data*</label>
    </div>
  </div>

и код ts:

import 'hammerjs';
import * as moment from 'moment';
  onSetDatepicker(date) {
    if (date.select) {
      $('#birthDate').pickadate().pickadate('picker').close();
    }
  }