[Feature Request] (Datepicker) should update selected date on input change

[hiepxanh]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

update the highlight date every input change while the calendar open
(or we can create some method like: selectedDate method to update it, or updateDate method to trigger change detection)

What is the current behavior?

If I press next day button (update the input value) while the calendar open but still not update the highlight date. only I close and reopen datepicker, it will update value.

What are the steps to reproduce?

I think it simple and clear to understand. tell me if you need example repository.

What is the use-case or motivation for changing an existing behavior?

I have next day, and previous day button, with today button. I want to change date manually but the selected date not update

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular 6
material 6
typescript 3
chrome 60

Is there anything else we should know?

no

[hiepxanh]

please, can someone help me?

[jelbourn]

Your screenshot isn't showing an Angular Material datepicker, so I don't think you have the right library.

[hiepxanh]

@jelbourn are you kidding me? why you close my issues and concluded hurriedly?
I'm creating an customize style on that Material calendar, sir

[hiepxanh]

I already try everything, event use changeDetectionRef.detectchanges() to update after have value but nothing happen, If only I close and reopen that calendar, the highlight position will be update

[hiepxanh]

<mat-form-field class="datepicker-wrapper">
  <!-- <mat-label>Custom calendar header</mat-label> -->
  <input matInput [matDatepicker]="picker" (dateChange)="actionChangeDate.emit($event)" [formControl]="date" (dateInput)="addEvent('input', $event)" >
  <!-- (dateChange)="addEvent('change', $event)"  -->
  <mat-datepicker-toggle matSuffix [for]="picker" id="datepicker-toggle"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

import { Component, OnInit, ViewChild, AfterViewInit, Output, EventEmitter, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { MAT_DATE_FORMATS, MatDatepickerInputEvent, MatDatepicker } from '@angular/material';
import { FormControl } from '@angular/forms';
export const APP_DATE_FORMATS = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric', date: 'short' },
  },
  display: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric', date: 'short' },
    monthYearLabel: { month: 'long', year: 'numeric' },
    dateA11yLabel: 'numeric',
    monthYearA11yLabel: 'numeric',
  }
  // ,
  // weekdays: [
  //   'Mon','Tue','Wed','Thu','Fri','Sat','Sun'
  // ]
};
@Component({
  selector: 'app-dashboar-toolbar-date-picker',
  templateUrl: './dashboar-toolbar-date-picker.component.html',
  styleUrls: ['./dashboar-toolbar-date-picker.component.scss'],
  providers: [
    {
      provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
  ],
  // changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboarToolbarDatePickerComponent implements OnInit, AfterViewInit, OnChanges {
  @ViewChild('picker') public picker: MatDatepicker<any>;
  @Output() actionChangeDate: EventEmitter<any> = new EventEmitter;
  @Input() viewDate:any;
  date = new FormControl();
  events: string[] = [];
  constructor(
    public cd: ChangeDetectorRef
  ) { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    this.date = new FormControl(new Date(changes.viewDate.currentValue));

    console.log("date picker changes")
    let dateElement = document.getElementsByTagName('mat-datepicker-content')[0];
    if (dateElement) {
      console.log("ya, we see calendar open")
      this.picker.close();
      setTimeout(() => {
        this.picker.open();
      }, 50);
    }
  }

  ngAfterViewInit() {
    // console.log("after view init")

  }

  addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    console.log('date event')
    this.events.push(`${type}: ${event.value}`);
  }
  
}

[hiepxanh]

BTW, I use this function to navigate time:

  navigateDate(date = this.viewDate) {
    this.itemRouting.dateChange$.next(new Date(date).getTime());
  }

then I put it in to the component I commented above:

<app-dashboar-toolbar-date-picker [viewDate]="viewDate" (actionChangeDate)="changeDate($event)" #dateComponent></app-dashboar-toolbar-date-picker>

anything I can provide that could help?

[hiepxanh]

thank you sir, thank you very much @jelbourn

[DmitryEfimenko]

The MatDatepicker has a method select(date), but it looks like it does not trigger change detection in the calendar