Есть ли способ локализовать тип ввода = "дата" в HTML5

Question

Я знаю, что на момент написания этой статьи только Opera поддерживает интерфейс браузера для

<input type="date" name="mydate">

и, возможно, мои попытки локализовать это поле были встречены разочарованием, потому что такие тонкости, как локализация, еще не были включены в их реализацию, но я даже не вижу упоминания об этом в спецификации HTML5. Есть ли способ указать локализацию? Должен ли я сделать lang = "fr" для родительского элемента?

Некоторые замечания по реализации данного сайта:

• Локализация (язык) явно выбрана пользователем, поскольку он управляет данными на нескольких языках, и нет смысла ожидать, что браузер Chrome пользователя находится на языке просмотра или браузер предоставляет требуемые заголовки языкового запроса.
• Я хочу быть уверен, что если страница отображается на французском языке, средство выбора даты, предоставляемое браузером Chrome, отображает параметры, которые имеют смысл для французского языка.
• Планируется использовать jQueryUI для браузеров, которые не поддерживают type = "date", я буду использовать механизм обнаружения, предоставленный в Погружение в HTML 5

Answer 1

Из того, что я знаю, мысль о том, что мы делаем в Opera (полное раскрытие: я работаю для них), заключается в том, что средство выбора даты является почти расширением chrome, встроенного в браузер элемента управления. Таким образом, он будет локализован в соответствии с языком браузера, а не языком просматриваемой страницы.

Answer 2

Я согласен с lambacck.В настоящее время я пишу код Javascript, чтобы новые функции формы стали доступны через браузер, используя для этого jQuery UI.

Я работаю в Люксембурге, который является хорошим местом, чтобы проиллюстрировать проблему локализации более подробно.

Большинство веб-сайтов, которые мы пишем, являются многоязычными de | fr | en.Из нашей статистики мы можем сказать, что люди используют переключатель языка на сайте для отображения своего предпочтительного языка, но этот выбор редко соответствует предпочтительной локали браузера.

Если локаль поля календаря и т. Д. Выполняется ОС, это возвращает нас к несчастному ситуация, когда на этикетке написано Загрузить файл , а на кнопке написано Parcourir .Вы ничего не можете сделать с этим языковым соединением, и я всегда находил, что это вызывает большое раздражение.

Заключение, я должен переписать календарь по умолчанию на jQuery, чтобы быть уверенным, что он выполняет то, что я хочу.

По моему мнению, был бы полезен настраиваемый API или, по крайней мере, способ манипулирования локалью на уровне HTML.Поскольку новые типы полей еще не получили широкого распространения у других производителей браузеров, я полагаю, что эту проблему еще можно принять во внимание.

Спасибо, что прочитали это.

Answer 3

Для мобильных устройств лучшим решением, которое мы нашли, является использование текстового ввода для ввода даты, рядом с которым стоит значок календаря, на котором невидимая дата вводится поверх значка.

Преимущества:

• работает на всех браузерах и устройствах
• можно использовать следующую кнопку в дате на iOS (если несколько полей)
• пользователь может ввести дату (очень полезно)
• позволяет избежать ошибок в пользовательском интерфейсе iOS (1. редактирование существующих данных с пустой датой, следующее за датой, значение даты установлено на сегодня - arrrgh, 2. отображение клавиатуры, следующее за датой, всплывающие окна и исчезновение клавиатуры - ой)
• использовать библиотеку дат для отображения даты при вводе в качестве набора локализации для учетной записи вашего пользователя (не браузера) и может использовать интеллектуальную библиотеку дат (введите «завтра» и т. Д.).
• щелкните значок календаря, чтобы увидеть дату в качестве локализации браузера
• постепенный откат, даже если input type=date не поддерживается устройством / браузером (например, некоторые устройства Android не поддерживают дату или имеют серьезные ошибки).
• для настольного компьютера (обнаружен без поддержки касания) мы показываем наш собственный выпадающий список даты.

HTML это что-то вроде:

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