1

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"/>
Mendy
  • 7,612
  • 5
  • 28
  • 42
Amith Dissanayaka
  • 939
  • 3
  • 12
  • 23
  • You could maybe have a look at this article: https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format – Corné Jan 10 '19 at 07:08

1 Answers1

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

Mendy
  • 7,612
  • 5
  • 28
  • 42
  • Thank you for your response @Mendy. I'm going to try another third party date picker. – Amith Dissanayaka Jan 10 '19 at 11:25
  • Other than Angular material Datepicker Is their any third party module that easily integrate with . Because some datepickers are hard to applywith ngModel – Amith Dissanayaka Jan 10 '19 at 11:59
  • You can try [ng-bootstraps datepicker](https://ng-bootstrap.github.io/#/components/datepicker/overview) or [ngx-bootstraps datepicker](https://valor-software.com/ngx-bootstrap/#/datepicker), they both use input tags so it should be fairly easy to use ngModel – Mendy Jan 10 '19 at 15:41
  • 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. – Amith Dissanayaka Jan 11 '19 at 04:30