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

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

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

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

Некоторые примечания по внедрению сайта:

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

Ответы

Ответ 1

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

Ответ 2

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

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

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

Если локаль поля календаря и т.д. выполняется ОС, это возвращает нас к неудачному < input type = file > ситуация, когда этикетка читает "Загрузите файл", и кнопка говорит "Parcourir". Вы ничего не можете сказать об этом языковом миксе, и я всегда считал это серьезным раздражением.

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

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

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

Ответ 3

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

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

  • работает во всех браузерах и устройствах
  • может использовать следующую кнопку в дату на iOS (если несколько полей)
  • пользователь может ввести дату (очень полезно)
  • избегает ошибок IOS UI (1. редактирование существующих данных с пустой датой, рядом с датой, значением даты установлено сегодня - arrrgh, 2. показ клавиатуры, следующая в дату, всплывающие окна и клавиатура исчезают - ouch)
  • используйте библиотеку дат, чтобы показать дату во входном файле как локализацию, установленную для вашей учетной записи пользователя (а не браузера), и можете использовать интеллектуальную библиотеку дат (введите "завтра" и т.д.).
  • нажмите значок календаря, чтобы увидеть дату в качестве локализации браузера.
  • изящный откат, даже если 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;
}