1

I have read about 200 links on browser language detection in javascript and nothing seems to work very well for my requirements except the default html5 input types.

For example:

  • I set my system to en-GB and my input type date shows dd/mm/yyyy
  • I set my system to en-US and my input type date shows mm/dd/yyyy

With either of the above set:

  • When I query the navigator.language it always says en-US
  • When I use header examination, it always says en-GB
  • I don't seem to have navigator.globalisation so none of that stuff works.
  • My user agent doesn't have a language component

The only thing consistent across ios safari, ios chrome, ie11, mac chrome, windows chrome, android chrome is that the date input always correctly shows the system format.

How does HTML5 do it, and how can I tap into that? or is this another one of those things you can't do in HTML5 like triggering the builtin validators?

Nigel Johnson
  • 522
  • 1
  • 5
  • 21

1 Answers1

1

How does HTML5 do it

Here is the suggested implementation:

Browsers are encouraged to use user interfaces that present dates, times, and numbers according to the conventions of either the locale implied by the input element's language or the user's preferred locale. Using the page's locale will ensure consistency with page-provided data.

Which means the input element's lang attribute or the browser settings are used.

and how can I tap into that?

A set of CSS classes, the lang attribute, LESS/SASS extensions, and associated JavaScript events to restyle the input elements to resemble and behave like hyperlinks would be a possibility.

A future option would be a Web Component:

Can Web Components be used to create custom input elements?

References

Community
  • 1
  • 1
Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265