Angular material today button

Question

My task is to put a today button on angular datepicker popup. (Selects the today date and closes popup)

<input matInput [matDatepicker]="toPicker" formControlName="validTo" >
<mat-datepicker-toggle matSuffix [for]="toPicker"></mat-datepicker-toggle>
<mat-datepicker #toPicker  >
   <mat-datepicker-actions>
    <button mat-button (click)="goToday()">Today</button>
  </mat-datepicker-actions> 
</mat-datepicker>

The angular function:

    @ViewChild('toPicker') toPicker: MatDatepicker<Date>;
  goToday() {
    this.toPicker.select(new Date());
    this.toPicker.close();
  }

This works! Unfortunately the default date selection is broken. I can click on a date but the popup remains open. Do you have idea how to add a today button and preserve the default funcionality

Answer 1

I have the same problem in my project and I have an idea. I hope it can help you.

@ViewChild('picker') datePicker: MatDatepicker<Date>;

goToday() {
    this.datePicker.select(new Date());
    this.datePicker.close();
  }

insertButton() {
    var matCalendar = document.getElementsByTagName("mat-calendar");
    if (matCalendar) {
      document.getElementsByTagName("mat-calendar")[0].insertAdjacentHTML('afterend', '<div class="m-2"><button id="today-button" style="width: 80px;float: right;">Today</button></div>')
      var todayButton = document.getElementById("today-button");
      todayButton.addEventListener("click", this.goToday.bind(this))
    }
  }

You can call the insertButton() in the click event of mat-datepicker-toggle and date picker input. It still work for me

Answer 2

There a problem with mat-datepicker that it's how we can access to the mat-calendar

When we have a mat-date-picker the mat-calendar is in

 mat-date-picker._componentRef?.instance._calendar

With this idea we can use mat-datepicker-actions

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" [(ngModel)]="date" />
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker >
    <mat-datepicker-actions>
      <button mat-raised-button color="primary" (click)="selectToday(picker)">
        Today
      </button>
    </mat-datepicker-actions>
  </mat-datepicker>
</mat-form-field>

En selectToday we can use

  //see that we pass the mat-date-picker
  selectToday(picker:any)
  {
    picker._componentRef.instance._calendar.activeDate=new Date()
  }

But if we use mat-date-picker-actions we need know how close the mat-date-picker

So, when it's opened we can subscribe to selectedChange of the monthView

  getMonthView(picker:any)
  {
    setTimeout(()=>{
      this.sub && this.sub.unsubscribe()
      this.sub=picker._componentRef?.instance._calendar
               .monthView.selectedChange.subscribe((res:any)=>{
                  this.date=res;
                  picker.close()
                })
     })
  }

When we call to this function?

Well, we need call to this function when the mat-date-picker is openened and also when we selected a month -click in year and select a month-

So

<mat-datepicker #picker (opened)="getMonthView(picker)" 
                        (monthSelected)="getMonthView(picker)">
  ...
</mat-datepicker>

A stackblitz