HTML5 input type date formatting

Question

I have to use HTML5 input type='date' for my angular 6 application. I want to Show it as dd/MM/yyyy format. But when I change Local pc time format as yyyy-MM-dd chrome automatically change the time format to local pc time format. But I want to set it as dd/MM/yyyy for all users. (Because their pc time formats can be different) How can I Solve this problem. Is their any method to format it.

If I put format attribute as follows it will not work.

<input type="date" format="dd/MM/yyyy"/>

You could maybe have a look at this article: stackoverflow.com/questions/7372038/… — Corné
– Corné, Commented Jan 10, 2019 at 7:08

Mendy · Accepted Answer · 2019-01-10 07:25:45Z

2

The short answer is that its not currently possible to do format the date (there is no format attribute available).

However, you probably want a solution, so here are some options that you might want to try

1) Use an <input type='text'> for display, and have a hidden <input type='date'> for when the user tries to open the date-picker (it might not be easy to open the native date picker programmatically), and have JavaScript put the date from the date-picker into the input type text

2) Just use a library with a customizable date picker like the Angular Material DatePicker with the setLocale method

answered Jan 10, 2019 at 7:25

Mendy

8,9116 gold badges32 silver badges48 bronze badges

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

4 Comments

Amith Dissanayaka Over a year ago

Thank you for your response @Mendy. I'm going to try another third party date picker.

Amith Dissanayaka Over a year ago

Other than Angular material Datepicker Is their any third party module that easily integrate with <input type='date' [(ngModel)="inputDate"]> . Because some datepickers are hard to applywith ngModel

Mendy Over a year ago

You can try ng-bootstraps datepicker or ngx-bootstraps datepicker, they both use input tags so it should be fairly easy to use ngModel

Amith Dissanayaka Over a year ago

Yeah, but their Output model is not same as normal date input. Model: { "year": 2019, "month": 1, "day": 31 }, So I have to write another method to handle this.

Collectives™ on Stack Overflow

HTML5 input type date formatting

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related