Change date picker format of single form-field in Angular

Question

As you can see I have already changed the opening Date date-picker format bu, I want to change year built format to Year(YYYY) only while keeping other form fields intact. is it possible to do that? or any references.

This example might help: material.angular.io/components/datepicker/… — David
– David, Commented Jun 17, 2022 at 9:03

Vikneysh Raj G G A · Accepted Answer · 2022-06-17 09:07:47Z

1

Angular Material provides MAT_DATE_FORMATS object which is the collection of formats used by Datepicker to parse and display dates. To use custom date format we need to override MAT_DATE_FORMATS with the given formats. Import it and provide your own date format.

 import { MAT_DATE_FORMATS } from '@angular/material';

Define a date format in a custom way as you require.

export const DATE_FORMAT= {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'DD MMM YYYY',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'YYYY',
  },
};

In @Component, add the provider

 providers: [
    { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT }
  ]

answered Jun 17, 2022 at 9:07

Vikneysh Raj G G A

11810 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change date picker format of single form-field in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related