Adding div to left or right of angular material date picker to show selected date

Question

I want to change style of angular material datepicker and add box to the date picker to show selected date, such as image below: enter image description here

How can I do that? any help would be greatly appreciated

score 0 · Answer 1 · answered Jul 12 '23 at 08:58

For example, you could make a new component that has the date picker in-line to the right and styled values to the left. Could utilize date pipes to parse the date as wanted.

https://angular.io/api/common/DatePipe

https://material.angular.io/components/datepicker/overview#datepicker-inline-calendar

Working example: https://stackblitz.com/edit/angular-1bjjgm-iscwxr?file=src%2Fapp%2Fdatepicker-inline-calendar-example.html

<div class="demo-flex-container">
  <div class="demo-selected-date">
    <p>Selected date: {{selected | date:'fullDate'}}</p>
    <p>Selected time: {{selected | date:'shortTime'}}</p>
  </div>
  
  <mat-card class="demo-inline-calendar-card">
    <mat-calendar [(selected)]="selected"></mat-calendar>
  </mat-card>
</div>

score 0 · Answer 2 · answered Jul 13 '23 at 06:10

The only is create a custom header like this SO

If you use pannelClass

<mat-datepicker panelClass="custom" #picker
           [calendarHeaderComponent]="exampleHeader">
</mat-datepicker>

The calendarHeader can be like

<!--see that it is "similar" to the original-->
<div class="mat-calendar-header">
  <div class="mat-calendar-controls">
    <!--"move" de button prev -->
    <button
      mat-icon-button
      type="button"
      class="mat-calendar-previous-button"
      [disabled]="!previousEnabled()"
      (click)="customPrev()"
      [attr.aria-label]="prevButtonLabel"
    ></button>
    <!--add a mat-calendar-space-->
    <div class="mat-calendar-spacer"></div>

    <!--change the button to remove the arrow-->
    <button
      mat-button
      type="button"
      class="mat-calendar-period-button"
      (click)="currentPeriodClicked()"
      [attr.aria-label]="periodButtonLabel"
      cdkAriaLive="polite"
    >
      {{periodButtonText.toLowerCase()}}
    </button>

    <div class="mat-calendar-spacer"></div>

    <-- add HERE the "slide" div-->
    <div class="slide">
      {{this.calendar.selected|date:'EEEE, MMMM d, y h:mm a'}}
    </div>
    <ng-content></ng-content>

    <button
      mat-icon-button
      type="button"
      class="mat-calendar-next-button"
      [disabled]="!nextEnabled()"
      (click)="customNext()"
      [attr.aria-label]="nextButtonLabel"
    ></button>
  </div>
</div>

As we have a custom class for the pannel we can add in styles.css

/*This "hidden" the month inside the calendar*/
.custom .mat-calendar-body-label{
  visibility:hidden
}
/*IMPORTANT, add padding to give space to the "slide"*/
.custom.mat-calendar{
  padding-left:100px; //<--use the same dimension than the slider
}
/*Our "slide" div*/
.custom .slide {
  position: absolute;
  left: 0;
  top:0;
  overflow-wrap: break-word;
  width:100px;  //<---width of the slider
  height:355px;
  color:white;
  background-color: royalblue;
  border-radius:.25rem 0 0 .25rem;
  padding:1rem;
  box-sizing: border-box;
}

You can see the example in this stackblitz

NOTE: The stackblitz use the material angular version 8.1.3, I don't know if there a minor changes in material (name of the class or others) check the code

Adding div to left or right of angular material date picker to show selected date

2 Answers2