I want to add buttons to my datepicker go to the previous and next day without opening the datepicker. After some hours I got this result:
Current state of datepicker with buttons
It’s not that bad, but also not perfect.

Both upper corners of the datepicker are not rounded and especially the transition to the right button is not good, but I don’t even know why that is.

I tried to set the border-radius of the datepicker to 0 (as I did with some corners of the buttons) but it does nothing.
I also tried to add a div with the same background-color which works, but surely is the wrong way to resolve this. After some time on google and here I didn’t find a solution.

Current html-file:

<div class="date-picker-container">
  <button class="date-picker-button-left" mat-mini-fab (click)="previousDay()">
    <mat-icon>chevron_left</mat-icon>
  </button>
  <mat-form-field [formGroup]="dateForm" class="date-picker-field">
    <mat-label>Choose a date</mat-label>
    <input
      matInput
      [matDatepicker]="picker"
      formControlName="date"
      (dateInput)="selectDate($event)"
    />
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle
    ><mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <button class="date-picker-button-right" mat-mini-fab (click)="nextDay()">
    <mat-icon>chevron_right</mat-icon>
  </button>
</div>

Current scss-file:

.date-picker-container {
  display: flex;
  align-items: flex-start;
}

.date-picker-button-left {
  height: 55px;
  border-radius: 12px 0 0 12px !important;
  background-color: #3f4948;
  color: white;
}

.date-picker-button-right {
  height: 55px;
  border-radius: 0 12px 12px 0 !important;
  background-color: #3f4948;
  color: white;
}