- Эту статью написал инженер-программист Chrome Кент Тамура.
Как вы, возможно, уже заметили, Google Chrome поддерживает средство выбора даты, начиная с Chrome 20. Просто установив атрибут type элемента input на date , пользователь может нажать кнопку со стрелкой, и Chrome откроет красивый виджет календаря.
Поскольку мы получили много отзывов от разработчиков, в этой статье мы хотели бы прояснить несколько моментов о том, как максимально эффективно использовать средство выбора даты.
Как локаль влияет на формат даты входного значения?
Пользователи могут ввести значение даты в текстовое поле input[type=date] с форматом даты, отображаемым в поле серым текстом. Этот формат получается из настроек операционной системы.
Веб-авторы не имеют возможности изменить формат даты, поскольку в настоящее время не существует стандартов, определяющих этот формат.
Как представляется входное значение при отправке на сервер?
Значение даты, интерпретируемое из input[type=date] в HTTP-запросе, например GET/POST, будет отформатировано как yyyy-mm-dd .
В каком формате возвращается входное значение?
input.value всегда возвращается в виде yyyy-mm-dd независимо от формата представления.
Какой формат принимает входное значение?
При программной настройке input.value значение принимает только стиль yyyy-mm-dd независимо от формата представления как для начального значения, так и для значения, введенного JavaScript.
Как изменить внешний вид средства выбора даты?
В настоящее время вы не можете стилизовать внешний вид средства выбора даты. Ранее в WebKit мы предоставляли способы стилизации элементов управления форм с помощью CSS-свойства -webkit-appearance или селектора псевдоклассов ::-webkit-foo . Однако всплывающее окно календаря не предоставляет таких способов в WebKit, поскольку оно отделено от документа, как всплывающее меню для <select> , и в настоящее время не существует стандарта для управления стилем его подэлементов.
Как избежать конфликтов между jQuery Datepicker и собственным средством выбора даты?
Если вы пробовали jQuery Datepicker для input[type=date] в Google Chrome, вы могли заметить перекрывающиеся календари как в пользовательском интерфейсе jQuery, так и во всплывающем окне собственного календаря. Если вы хотите применить jQuery Datepicker на всех платформах, используйте input[type=text] вместо input[type=date] . Не только Google Chrome, но и iOS Safari, браузер BlackBerry и Opera имеют собственный пользовательский интерфейс для input[type=date] , и в настоящее время нет способа добиться единого пользовательского интерфейса на всех платформах с помощью input[type=date] . Если вы хотите применять jQuery Datepicker только на платформах без поддержки input[type=date] , вы можете использовать Modernizr или следующий код:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();