CODEWITHSUNDEEP
angulardatepickerangular-material
herk
herk

Reputation: 15

Angular Datepicker showing seperately month and year

I am trying to find an angular date-picker that looks like the image below:

1

Does anyone know any datepicker that is similar to this or whether I could use Angular Material Datepicker to create something similar to the image attached?

Upvotes: 1

Views: 1204

Answers (1)

Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5041

Yes, you can use Angular Material Datepicker to create something similar to the image attached.

You can refer Datepicker with custom calendar header in this link and stackblitz link from Angular material datepicker

Modified stackblitz as per your requirement

You need to provide header template to the MatDatePicker

Main changes I made compared to original stackblitz provided by angular material

header-template.html

<div class="example-header">
    <span class="example-header-label">{{monthLabel}}</span>
    <button mat-icon-button (click)="previousClicked('month')">
        <mat-icon>keyboard_arrow_left</mat-icon>
      </button>
    <button mat-icon-button (click)="nextClicked('month')">
        <mat-icon>keyboard_arrow_right</mat-icon>
      </button>
    <span class="example-header-label">{{yearLabel}}</span>
    <button mat-icon-button class="example-double-arrow" (click)="previousClicked('year')">
        <mat-icon>keyboard_arrow_left</mat-icon>
      </button>
    <button mat-icon-button class="example-double-arrow" (click)="nextClicked('year')">
        <mat-icon>keyboard_arrow_right</mat-icon>
      </button>
</div>

datepicker-custom-header-example.ts

get monthLabel() {
  return this._dateAdapter
    .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
    .toLocaleUpperCase().split(" ")[0];
}

get yearLabel() {
  return this._dateAdapter
    .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel).split(" ")[1];
}

And you can play with original stackblitz provided by Angular material datepicker

Upvotes: 2

Related Questions