angulartypescriptangular-materialangular8angular-material-datetimepicker

How to display Month Only, Excluding Day and Year


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 .

enter image description here

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


Solution

  • 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>
    

    enter image description here

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