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()">
    <input matInput [matDatepicker]="picker_start"
           placeholder="Date de début" required formControlName="dt_start" (click)="picker_start.open();">
    <mat-datepicker-toggle matSuffix (click)="picker_end.open(); updateCalendarUI()"></mat-datepicker-toggle>
    <mat-datepicker #picker_start startView="year"></mat-datepicker>
  </mat-form-field>

in the .ts file

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

    export class AppDateAdapter extends NativeDateAdapter {
       format(date: Date, displayFormat: Object): string {
        // use what format you need
        return moment(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);
   }