How to display Month Only, Excluding Day and Year

Question

How do I create a Month Date Picker in Angular, excluding hide Day And Year?

This following link will do a Month and Year picker. I am trying to manipulate it to do Month Only. How can this be configured?

Stackblitz:

https://stackblitz.com/angular/gxymgjpprdy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts

Result should be something like this, value emitted can be for Example May: a) 5 Or b) 5/1/2020. And I can remove Day and year later .

Resources: Angular Material DatePicker: Month and Day, Exclude Year

Answer 1

You can simply do this with help of css.

.mat-calendar-controls .mat-calendar-period-button {
  display: none;
}

mat-year-view .mat-calendar-body-label{
  display: none !important;
}

This will hide your button and will work as per your expectations.

Also you need to change in your HTML for startView option of date-picker as

I have fork this stackblitz here

<mat-datepicker #dp
              startView="year"
              (yearSelected)="chosenYearHandler($event)"
              (monthSelected)="chosenMonthHandler($event, dp)"
              panelClass="example-month-picker"></mat-datepicker>

If you need to remove 2020 from input control, you can do change the formats in component file.

To change the month formats, simply change here on dateInput

display: {
  dateInput: 'MM',