- Эту статью написал инженер-программист 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 UI, так и собственного всплывающего календаря. Если вы хотите применить 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();