Adding and styling buttons to material datepicker to fit in seamlessly

Question

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;
}

Answer 1

The datepicker is wrapped in a mat-form-field, which has a border radius at the top left and top right. This is also reproducible in the docs. Simply remove it with CSS.

.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper {
  border-radius: 0;
}

Note: When using emulated view encapsulation, ::ng-deep is necessary here because styles of internal Material components need to be overridden.