Angular Material Datepicker: Month And Day, Exclude Year

How do I create a Month and Day Date Picker in Angular, excluding hide year? This following link will do a Month and Year picker. I am trying to manipulate it, to do Month and Day.

Solution 1:

I hope you are expecting date format like DD/MMM. If so then change dateInput in display and parse object like below

dateInput:'DD/MMM'

Hope this helps.

Here is the stackblitz code.

https://stackblitz.com/edit/angular-hw54xf

Solution 2:

image

So , first in the html file

 <mat-form-field class="mat-50-left" (click)="updateCalendarUI()">
    <inputmatInput [matDatepicker]="picker_start"placeholder="Date de début"requiredformControlName="dt_start" (click)="picker_start.open();"><mat-datepicker-togglematSuffix (click)="picker_end.open(); updateCalendarUI()"></mat-datepicker-toggle><mat-datepicker #picker_startstartView="year"></mat-datepicker></mat-form-field>

in the .ts file

import {DateAdapter, NativeDateAdapter} from"@angular/material/core";
       import * as moment from"moment";

    exportclassAppDateAdapterextendsNativeDateAdapter {
       format(date: Date, displayFormat: Object): string {
        // use what format you needreturnmoment(date).format('DD MMM');
      }
    }

add in providers

providers: [{provide:DateAdapter, useClass:AppDateAdapter}]

To update calendar UI

  updateCalendarUI(): void {

     setTimeout(() => {
       let calendar = document.getElementsByClassName('mat- 
      calendar').item(0);
      if (calendar) {
         calendar['style'].height = '275px';
         calendar['style']['padding-top'] = '15px';
        }
     let header = document.getElementsByClassName('mat-calendar- 
      header').item(0);
      if (header) {
         header['style'].display = 'none';
      }
      let yearLabel = document.getElementsByClassName('mat-calendar-body- 
       label').item(0);
      if (yearLabel) {
          yearLabel['style'].display = 'none';
      }
    }, 1);
   }