How to force localized date picker in html5?

Question

I have a website where users have to enter dates. I use the html form of type date.

Format is sometimes mm/dd/yyyy sometimes mm.dd.yyyy This is probably confusing for my local users. How is this chosen? Is there a solution to show the entered dates in a forced local format? Or force it to be always dd.mm.yyyy?

Edit: It's fairly standard code, not much to see here.

<div class="form-group">
    <label for="edate">Entry date:</label>
    <input autocomplete="off" autofocus class="form-control" name="edate"
        id="edate" placeholder="2019-01-01" type="date" required>
</div>

This is an image preview of the code in Firefox (FF and Windows Installations are in German, as well as keyboard layout, IP address and anything else I can think of):

Screenshot of Firefox Layout

this answer still applies https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format — Alex Angelico, Jul 28 '21 at 17:32

score 0 · Answer 1 · answered Feb 20 '20 at 14:43

From what I understand, the date format on is based on the user's own language settings.

If the user's browser language setting uses English (United Kingdom), for example, then the date picker for them will display as dd/mm/yyyy. You should be able to test this out for yourself with a quick language switch.

Edit: see the top answer here, which seems to confirm this, and explores 'presentation format': Is there any way to change input type="date" format?

That does not really reflect what I experience :/ – vaeng Feb 21 '20 at 11:32 — vaeng, Feb 21 '20 at 11:32

score 0 · Answer 2 · answered Feb 20 '20 at 14:44

0

You can use the pattern attribute on your input of type date :

<input type="date" pattern="[0-9]{2}.[0-9]{2}.[0-9]{4}">

But I don't know how browser will place the dd or mm...

answered Feb 20 '20 at 14:44

Antonin Beaufort

333
3
8

How to force localized date picker in html5?

2 Answers2