0

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

Géza
  • 113
  • 7
  • Do you get any javascript errors in the console? – Eric Phillips May 03 '22 at 13:02
  • No. I think it is a base funcionality. If there are mat-datepicker-actions then it waits for MatDatepickerApply button? – Géza May 03 '22 at 14:27
  • Isn't this exactly what you're looking for? https://stackblitz.com/edit/mat-datepicker-now-button?file=src%2Fapp%2Fdatepicker-custom-header-example.html Literally the first thing that popped up on an online search. – Aldin Bradaric May 03 '22 at 14:49
  • Thank you something like that! But in this case the year chooser disappeared. I prefer today button at the footer to write ther "Today" – Géza May 03 '22 at 16:08

0 Answers0