Есть ли способ, чтобы локализовать входной тип = «дата» в HTML5

Question

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

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

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

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

• локализация (язык) явно подобран пользователем, потому что они управляют данными на нескольких языках, и это не разумно ожидать, что браузер пользователя chrome находится на просматриваемом языке или что браузер предоставляет заголовки запросов желаемого языка.
• Я хочу быть уверенным, что если страница будет отображаться на французском языке, то выбор даты, предоставляемый браузером хром, показывает варианты, которые имеют смысл для французского языка.
• Плана падать обратно jQueryUI для браузеров, которые не поддерживают тип = «дату», я буду использовать механизм обнаружения, представленный в Dive into HTML 5

Answer 1

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

Answer 2

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

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

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

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

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

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

Спасибо за это.

Answer 3

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

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

• работает на всех браузерах и устройствах
• можно использовать следующую кнопку в курсе прошивкой (если несколько полей)
• пользователь может ввести дату (очень полезно)
• Избегает 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; 
}