HTML5, тип ввода datetime vs datetime-local, который я должен использовать?

Ответ 1

Разница между ними заключается в том, что локальный вход datetime не включает часовой пояс. Если часовой пояс не имеет значения для вашего приложения, используйте datetime-local.

Некоторые браузеры все еще пытаются догнать тип ввода даты и времени. Firefox 7 все еще не показал каких-либо успехов в этой области. Вместо этого настройте свой собственный, используя три поля выбора с параметрами, которые заполняются по отношению к сегодняшней дате. Это дает вам больший контроль над тем, как он выглядит и ведет себя, и вы не рискуете, что многие ваши пользователи будут видеть только обычные текстовые поля и должны угадать, как вводить в них информацию.

Ответ 2

Обновление: W3C добавила [email protected] назад и сбросила поддержку для [email protected] - теперь браузеры отображают datetime как обычный текст типа: см. Почему вход HTML5 тип datetime удален из браузеров, уже поддерживающих его?

Старый ответ для справки

Надеюсь, вы не выбрали datetime-local.: -)

W3C HTML сбросил тип ввода @datetime-local; "мало независимый ценность и источник потенциальной неразберихи разработчиков"

Источник: https://twitter.com/html5/status/433038890937901056

История процесса находится здесь: http://encosia.com/setting-the-value-of-a-datetime-local-input-with-javascript/

Это была какая-то запутанная неустойчивость вокруг входов datetime как HTML5 присоединился к рекомендации.

В начале, спецификация W3c HTML5 просто предложила вход datetime. Начиная с iOS 5, Mobile Safari начал отображать пользовательский интерфейс для этого ввода, который соответствовал одному пользователю найти в родных приложениях. Другие мобильные браузеры быстро последовали этому примеру.

Позднее datetime был удален из спецификации HTML5 в пользу объединяя отдельные вводы даты и времени, чтобы дату/время с двумя отдельными входами. Уменьшая количество новые типы ввода имеют какой-то смысл, он игнорирует полезность показа комбинированный виджет даты и времени, который уже присутствует и мобильные устройства.

Далее, datetime-local input был добавлен в спецификацию для замены пустоты, которая удаляет дату и время. Новый вход быть похожим на старый, но не имеет понятия часового пояса смещение.

В конце 2014 года W3C решила отказаться от datetime-local из рекомендации HTML5, потому что это может привести к путанице. Однако, доминирующие мобильные браузеры (т.е. Mobile Safari и Chrome) уже внедренный datetime-local и сделал его де-факто стандартом. Итак, w3C смягчился и добавил его к последней рекомендации проект.

Добавление к путанице немного больше, Apple по-прежнему перечисляет оба datetime и datetime-local в качестве поддерживаемых типов ввода для iOS 5.0 и позже. Это не совсем так. Начиная с iOS 7, Mobile Safari начал показывать свой собственный интерфейс для datetime-local input и одновременно снизилась поддержка входов даты и времени. Как и с любым тип ввода, который браузер не имеет расширенной поддержки, datetime Входы начали возвращаться к полям обычного текста в iOS 7.

Короче говоря, вы должны использовать datetime-local для iOS 7+ (по крайней мере, через текущую версию 8.1.3, когда я пишу это), и ее полезно понять, что "локальный" означает, что вход является агностическим часовым поясом.

Ответ 3

Посмотрите поля ввода даты HTML5 на iOS5 или в Google Chrome для Android, это довольно круто. У обоих есть поддержка типов date, datetime, datetime-local, time, month, только неделя отсутствует. Особенно для мобильных/сенсорных клиентов очень важно поддерживать новые времена ввода. Для моего приложения я покажу вам календарь на основе js/html (например, dynarch) или поле ввода html5 в зависимости от клиента.

Ответ 4

Здесь более поздний (от 23 апреля 2017 года) и окончательный ответ (выделен жирным шрифтом), за MDN:

< input type = "datetime" >

Устаревшие

Эта функция устарела. Хотя он может по-прежнему работать в некоторых браузерах, его использование не рекомендуется, поскольку оно может быть удалено в любое время. Старайтесь не использовать его.

HTML был элементом управления для ввода даты и времени (час, минута, секунда и доля секунды), а также часовой пояс. Эта функция была удалена из WHATWG HTML и больше не поддерживается в браузерах.

Вместо этого браузеры реализуют (и разработчикам рекомендуется использовать) тип данных типа datetime.

Источник

Ответ 5

В приведенном ниже коде показан календарь из окна ввода во всех браузерах. Вставить код в начало страницы.

<link ref="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

<script type="text/javascript">
$(function() {
    $("#datepicker").datepicker({ dateFormat: "mm-dd-yy" }).val()
});

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function() {    
        $(".ui-datepicker").css('font-size', 12) 
    }
});
</script>

<style>
div.ui-datepicker, .ui-datepicker input {
    font-size:35%;
    line-height: .6;
}
</style>