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',

Answer 2

You should create a custom modal with all months of the year an show them with skin similar to Angular Material Datepicker, in order to achieve this, you could change CSS in your component. Even if you want, you could save this component as a sharing component in order to reuse it whenever you need it.