Is there a way to localize input type=“date” in HTML5

Question

I know that at the time of this writing only Opera supports a browser UI for

and maybe my attem

Answer 1

For mobile the best solution we have found is to use a text input for date entry, with a calendar icon next to it that has an invisible date input over the icon.

Advantages:

• works on all browsers and devices
• can use next button into date on iOS (if multiple fields)
• user can type in date (very useful)
• avoids iOS UI bugs (1. editing existing data with blank date, next into date, date value is set to today - arrrgh, 2. keyboard showing, next into date, popup shows and keyboard disappears - ouch)
• use a date library to show date in input as localisation set for your user's account (not browser), and can use a smart date library (type in "tomorrow" etc).
• click calendar icon to see date as browser localisation
• graceful fallback even if input type=date not supported by device/browser (e.g. some Android devices don't support date or have serious bugs).
• for desktop (detected by no touch support) we show our own custom date dropdown.

HTML is a something like:

<input type=text>
<span style=position:relative>
  <input type=date class=date-input tabIndex=-1>
  <div class=date-input-icon>&#x25BC;</div>
</span>

CSS:

.date-input {
  position: relative;
  z-index: 1;
  webkit-appearance: none;
  display: inline-block;
  opacity: 0;
  width: 1em;
}

.date-input-icon {
  position: absolute;
  right: 0;
  width: 1em;
}

Answer 2

I agree with lambacck. Currently I am writing Javascript code to make the new form features available cross browser, using jQuery UI for this.

I work in Luxemburg which is a good place to illustrate the localization problem in more detail.

Most websites we write are multilingual de|fr|en. From our stats we can tell, that people use the language switch on the site to display their preferred language, but this choice rarely matches the preferred browser locale.

If the locale of the calendar etc. field is done by the OS, this brings us back to the unfortunate <input type=file> situation where the label reads Upload a file and the button says Parcourir. You can do nothing about this language mix and I always found this to be a major annoyance.

Conclusion, I have to overwrite the default calendar with the jQuery one to be sure it does what I want.

In my opinion a configurable API or at least a way to manipulate the locale on a HTML level would be great. Since the new field types are not widely adopted yet by the other browser manufacturers, I imagine this issue could still be taken in account.

Thanks for reading this.

Answer 3

From what i know, the thinking behind what we do in Opera (full disclosure: I work for them) is that the date picker is almost an extension of the chrome, a browser-native control. As such, it will be localised according to the language of the browser, rather than the language of the page being viewed.