Add Footer to Angular Material Datepicker

I ended up adjusting the other answer. I am not too happy with the implementation, but it works without being too complex. A further feature would be to correctly select the datepicker to append the buttons to (since there may be multiple).

The end result would look something like:

https://stackblitz.com/edit/angular-c9xqse-pnrpgw

With newer Angular versions it's a built-in feature. Just use the mat-datepicker-actions ditective. Live example

Above answers does not say that after adding extra elements to DatePicker or DateRangePicker using renderer2 and appendChild(), it won't allow for appropriate keyboard accessibility since extra added elements won't get focus as they should. The focus is trapped inside mat-calendar, which uses the cdkTrapFocus.

Since @angular-material v11.2.12 there is possibility to customize Confirmation Action Buttons. Due to this, it is no longer needed the usage of renderer2 and appendChild() in order to customize footer.

Together with Confirmation Action Buttons and Customizing the calendar header it is possible to add extra buttons, labels, texts etc. to header and the footer.

Here is the example, both with edited footer and header.

At my work we did something like that to add a timepicker to the datePicker. You can add the button by using .appendChild() or .append().

The idea is to append a component into the datepicker is I remember well. I'm not good enough in angular to reproduce it correctly but here is a basic repro of the concept on stackblitz

Also, i found enter link description here that seems accurate for your needs.

Hope it helps !

I solved this using mat-datepicker-actions

<input class="form-control " title="Data" matInput [matDatepicker]="picker" formControlName="date">
          <mat-datepicker-toggle class=" my-auto" matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker>
            <mat-datepicker-actions class="">
              <button title="today" class="btn button" (click)="setTodayDate()" matDateRangePickerApply>
                [Hoje]
              </button>
            </mat-datepicker-actions>
          </mat-datepicker>

result image