title: Angular Material DatePicker: Month and Day, Exclude Year
body: <p>How do I create a Month and Day Date Picker in Angular, excluding hide year?</p>
  
  <p>This following link will do a Month and Year picker. I am trying to manipulate it, to do Month and Day. Replacing YYYY with DD is not working.</p>
  
  <p><strong>Stackblitz:</strong></p>
  
  <p><a href="https://stackblitz.com/angular/gxymgjpprdy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts" rel="nofollow noreferrer">https://stackblitz.com/angular/gxymgjpprdy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts</a></p>
  
  <p><strong>Real code from Stackblitz:</strong></p>
  
  <p><strong>Typescript:</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import {FormControl} from '@angular/forms';
  import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
  import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
  import {MatDatepicker} from '@angular/material/datepicker';
  
  // Depending on whether rollup is used, moment needs to be imported differently.
  // Since Moment.js doesn't have a default export, we normally need to import using the `* as`
  // syntax. However, rollup creates a synthetic default module and we thus need to import it using
  // the `default as` syntax.
  import * as _moment from 'moment';
  // tslint:disable-next-line:no-duplicate-imports
  import {default as _rollupMoment, Moment} from 'moment';
  
  const moment = _rollupMoment || _moment;
  
  // See the Moment.js docs for the meaning of these formats:
  // https://momentjs.com/docs/#/displaying/format/
  export const MY_FORMATS = {
    parse: {
      dateInput: 'MM/YYYY',
    },
    display: {
      dateInput: 'MM/YYYY',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY',
    },
  };
  
  /** @title Datepicker emulating a Year and month picker */
  @Component({
    selector: 'datepicker-views-selection-example',
    templateUrl: 'datepicker-views-selection-example.html',
    styleUrls: ['datepicker-views-selection-example.css'],
    providers: [
      // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
      // application's root module. We provide it at the component level here, due to limitations of
      // our example generation script.
      {
        provide: DateAdapter,
        useClass: MomentDateAdapter,
        deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
      },
  
      {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
    ],
  })
  export class DatepickerViewsSelectionExample {
    date = new FormControl(moment());
  
    chosenYearHandler(normalizedYear: Moment) {
      const ctrlValue = this.date.value;
      ctrlValue.year(normalizedYear.year());
      this.date.setValue(ctrlValue);
    }
  
    chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker&lt;Moment&gt;) {
      const ctrlValue = this.date.value;
      ctrlValue.month(normalizedMonth.month());
      this.date.setValue(ctrlValue);
      datepicker.close();
    }
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;input matInput [matDatepicker]="dp" placeholder="Month and Year" [formControl]="date"&gt;
    &lt;mat-datepicker-toggle matSuffix [for]="dp"&gt;&lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker #dp
                    startView="multi-year"
                    (yearSelected)="chosenYearHandler($event)"
                    (monthSelected)="chosenMonthHandler($event, dp)"
                    panelClass="example-month-picker"&gt;
    &lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I do not want year option below in green, would like to disable year</p>
  
  <p><a href="https://i.stack.imgur.com/PenfM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PenfM.png" alt="enter image description here"></a></p>
  
  <p><strong>Other Resources:</strong></p>
  
  <p><a href="https://material.angular.io/components/datepicker/overview#watching-the-views-for-changes-on-selected-years-and-months" rel="nofollow noreferrer">https://material.angular.io/components/datepicker/overview#watching-the-views-for-changes-on-selected-years-and-months</a></p>
  
  <p><a href="https://stackoverflow.com/questions/54266328/angular-material-date-picker-disable-the-year-selection">Angular Material Date picker disable the year selection</a></p>