mat-datepicker - unable to set date display format as dd-mm-yyyy

[jayakrishna-v]

Bug, feature request, or proposal:

I would like to know how to set the date display format as dd-mm-yyyy using mat-datepicker

What is the expected behavior?

Date to be displayed as dd-mm-yyyy

What is the current behavior?

Date is currently displayed as d-m-yyyy

What are the steps to reproduce?

https://stackblitz.com/angular/nqbgnmoyrod?file=app%2Fdatepicker-formats-example.html

What is the use-case or motivation for changing an existing behavior?

We need to display the dates in dd-mm-yyyy across our application

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 1.7.3
Node: 8.9.4
OS: win32 x64
Angular: 5.2.9

Is there anything else we should know?

There is no proper example or documentation or easier way to do this.

[Fededark]

+1

[prashantpimpale93]

@jayakrishna-v Any updates or alternate solution?

[Kaidanov]

following. any solutions?

[hermesf]

bug detected

[Peeripapo]

Bump.

[viktor-potapov]

Why did you close it? I still see only d-m-yyyy format and don't see easy way to change date format

[wottpal]

Seriously, why is t here no reaction here and why did the thread closed? I have set the local like:

    {
      provide: MAT_DATE_LOCALE, useValue: 'de'
    },

And there seems no way to change the format from d-m-yyy to dd-mm-yyyy event though the latter is "more german".

[wottpal]

UPDATE

I had to admit that the solution to this (also if not very straightforward) is pretty well documented on https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings (see headline Customizing the parse and display formats).

If you are using Moment.js it's easy to use MatMomentDateModule and if you want to do something completely customized just subclass NativeDateAdapter. As I vastly prefer Day.js over Moment.js because of its tiny size I wrote a custom DateAdapter utilizing it to display my dates as DD.MM.YYYY.

Feel free to use or modify this for your needs: https://gist.github.com/wottpal/4211f4c01c41b16be181110273cff5a9

[viktor-potapov]

Anyway it is not easy to just change date format, especially if I don't want to use extra library only for that (Momen has big size). The best way, just to have attribute for component for setting date format. Wottpal, thank you for your answer with detailes and example

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}