Angular Material: How to format datepicker day label?

Viewed 1567

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.

1 Answers

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.

Related