CODEWITHSUNDEEP
angulardatepickerangular-material
noam steiner
noam steiner

Reputation: 4444

Angular Material: How to format datepicker day label?

Is it possible to change the day labels from 2 characters to 3?

From:

enter image description here

To:

enter image description here

I couldn't find any reference to that in the docs.

Upvotes: 6

Views: 3627

Answers (2)

Vaaruni Agarwal
Vaaruni Agarwal

Reputation: 21

I was looking for a Similar solution, here is how you can implement it.

Create a custom-date-adapter.ts in the same component folder, where the Calendar is. The contents of the file will be -

import { NativeDateAdapter } from "@angular/material/core";

export class CustomDateAdapter extends NativeDateAdapter {
getDayOfWeekNames(style): string[] {

    const SHORT_NAMES = ['Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

    return SHORT_NAMES;
  }
}

In your component.ts file make followng changes -

import { CustomDateAdapter } from './custom-date-adapter';

and then in the @Component

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

This should solve your issue.

Upvotes: 0

Christopher Peisert
Christopher Peisert

Reputation: 24194

The Angular Material Datepicker weekday headers can be customized by extending the MomentDateAdapter.

@Injectable()
class CustomDateAdapter extends MomentDateAdapter {
  getDayOfWeekNames(style: 'long' | 'short' | 'narrow') {
    return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  }
}

See Stackblitz demo.


References

This answer was originally provided by Andrew Seguin in response to Angular Components issue #16240.

Upvotes: 6

Related Questions