Date/Time Picker Locale Test

Compare how <input type="date">, time and datetime-local render and edit across browsers, when the OS locale and/or the page's lang attribute disagree with each other. Chromium-based browsers are expected to follow lang; Firefox and Safari are expected to ignore it and always use the OS/browser locale. The raw value shown under each field is always the ISO, locale-independent value the browser would submit — it's there to prove the display format is purely cosmetic.

navigator.language
navigator.languages
Intl resolved locale
Intl hourCycle
document.documentElement.lang
en-US (page default)

Date fields

Tests mm/dd/yyyy vs dd/mm/yyyy vs dd.mm.yyyy vs yyyy/mm/dd ordering.

lang="en-US"

expect mm/dd/yyyy

raw value: (empty)
lang="en-GB"

expect dd/mm/yyyy

raw value: (empty)
lang="de-DE"

expect dd.mm.yyyy

raw value: (empty)
lang="de-AT"

expect dd.mm.yyyy

raw value: (empty)
lang="ja-JP"

expect yyyy/mm/dd, Japanese labels in picker

raw value: (empty)
no lang attribute

control / baseline — follows OS/browser locale

raw value: (empty)

Time fields

Tests 12h AM/PM vs 24h display.

lang="en-US"

expect 12h with AM/PM

raw value: (empty)
lang="en-GB"

expect 24h

raw value: (empty)
lang="de-AT"

expect 24h

raw value: (empty)
lang="ja-JP"

expect 24h (varies by OS setting)

raw value: (empty)
no lang attribute

control / baseline — follows OS/browser locale

raw value: (empty)

Datetime-local fields

Combines both axes: date order and 12h/24h time in one control.

lang="en-US"

expect mm/dd/yyyy, 12h AM/PM

raw value: (empty)
lang="de-AT"

expect dd.mm.yyyy, 24h

raw value: (empty)
no lang attribute

control / baseline — follows OS/browser locale

raw value: (empty)