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:

  
  
▼

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;
}