Angular Material DatePicker: Month and Day, Exclude Year
13,612
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
Author by
Admin
Updated on June 04, 2022Comments
-
Admin almost 2 years
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. Replacing YYYY with DD is not working.
Stackblitz:
https://stackblitz.com/angular/gxymgjpprdy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts
Real code from Stackblitz:
Typescript:
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<Moment>) { const ctrlValue = this.date.value; ctrlValue.month(normalizedMonth.month()); this.date.setValue(ctrlValue); datepicker.close(); } }
HTML:
<mat-form-field> <input matInput [matDatepicker]="dp" placeholder="Month and Year" [formControl]="date"> <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle> <mat-datepicker #dp startView="multi-year" (yearSelected)="chosenYearHandler($event)" (monthSelected)="chosenMonthHandler($event, dp)" panelClass="example-month-picker"> </mat-datepicker> </mat-form-field>
I do not want year option below in green, would like to disable year
Other Resources: