Angular Материал Datepicker: событие изменения не срабатывает при выборе даты

Я использую Angular и Angular Material Datepicker. Все работает отлично по большей части, однако я добавил событие (change), которое работает только тогда, когда пользователь вручную вводит дату. Он не запускается, когда пользователь нажимает на дату из всплывающего окна datepicker. Чтобы быть ясным, значение для date действительно изменяется, когда пользователь нажимает на дату, это просто событие (change) и, в конечном счете, моя функция updateCalcs(), которая по какой-то причине не запускается. Как я могу инициировать событие, когда пользователь нажимает на дату из datepicker?

<md-input-container>
    <input mdInput [mdDatepicker]="datePicker" placeholder="Choose Date" name="date" [(ngModel)]="date" (change)="updateCalcs()" required>
    <button mdSuffix [mdDatepickerToggle]="datePicker"></button>
</md-input-container>
<md-datepicker #datePicker></md-datepicker>

Ответ 1

Используйте selectedChanged внутри md-datepicker.

<md-datepicker #datePicker (selectedChanged)="updateCalcs($event)"></md-datepicker>

$event будет выдавать новое значение, которое вы можете использовать в своей функции updateCalcs().

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

Подобное демо

Ответ 2

Заменить change на ngModelChange

Меняться от

<input mdInput 
       [mdDatepicker]="datePicker" 
       placeholder="Choose Date" 
       name="date" [(ngModel)]="date" 
       (change)="updateCalcs()" required>

<input mdInput 
       [mdDatepicker]="datePicker" 
       placeholder="Choose Date" 
       name="date" [(ngModel)]="date" 
       (ngModelChange)="updateCalcs()" required>

Ответ 3

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Input & change events"
         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

И .ts

addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    //console.log(event.value)
}

Проверьте здесь

Ответ 4

Я должен добавить, что (dateInput) не всегда (dateInput) меня, в конечном итоге с помощью (keyup)

код HTML

  <mat-form-field>
        <input #fromInput matInput [matDatepicker]="pickerFrom" placeholder="סנן תאריך התחלה" 
          (dateChange)="filterFrom($event)" (keyup)="filterInputKeyupFrom()">
        <mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
        <mat-datepicker #pickerFrom></mat-datepicker>
    </mat-form-field>

окончательный код TS

 private parseInputDate(v):Date{
      //this was a manual change in the input and needs to be parsed
      let a:Array<any> = v.split('.')
      a.forEach((v, i) => a[i] = parseInt(v) + (i == 1 ? -1 : 0))
      console.log(new Date(a[2], a[1], a[0]))
      return  new Date(a[2], a[1], a[0])
  }

  //(dateInput) wasn't always firing for me, ended up using (keyup)
  filterInputKeyupFrom(){
    this.lastFrom = this.parseInputDate(this.fromInput.nativeElement.value)
    if (this.lastFrom) {
      this.lastFrom.setSeconds(-1)
    }
    this.filterDates()
  }

  filterInputKeyupUpTo(){
    this.lastTo = this.parseInputDate(this.toInput.nativeElement.value)
    if (this.lastTo) {
      this.lastTo.setDate(this.lastTo.getDate()+1)
    }
    this.filterDates()
  }

  filterFrom(e:MatDatepickerInputEvent<Date>){
    console.log('filterFrom')
    //changing manually the input and then exit from it fires here
    if(e.value){
      //need to clone the date or changes are applied on the Picker
      this.lastFrom = new Date(e.value)
      if (this.lastFrom) {
        this.lastFrom.setSeconds(-1)
      }
      this.filterDates()
    }
  }

  filterUpTo(e:MatDatepickerInputEvent<Date>){
    console.log('filterUpTo')
    if(e.value){
      this.lastTo = new Date(e.value)
      if (this.lastTo) {
        this.lastTo.setDate(this.lastTo.getDate()+1)
      }
      this.filterDates()
    }
  }

Ответ 5

Это событие dateChange которое dateChange как при редактировании даты в текстовом поле, так и при изменении даты с помощью элемента управления календаря. Смотрите здесь

<mat-form-field>
  <input matInput [matDatepicker]="datepicker" required placeholder="Choose a date" (dateChange)="valueChanged()">
  <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
  <mat-datepicker #datepicker></mat-datepicker>
</mat-form-field>