Как получить тип ввода HTML 5 = «дата», работающий в Firefox и / или IE 10

Я нахожу странным, что input type="date"по-прежнему не поддерживается в Firefox все это время. На самом деле, я не думаю, что они добавили много (если таковые имеются) новых типов HTML 5 в элемент ввода. Не удивлен, что он не поддерживается в IE10. Итак, мой вопрос ...

Как получить type="date"на inputэлемент работы без добавления, еще один, .js файл (а именно jQueryUIDatePicker Widget) только , чтобы получить календарь / дату только IE и Firefox браузеров? Есть ли что-то, что может быть применено где-нибудь (возможно, CDN?), Которое заставит эту функциональность работать по умолчанию в Firefox и / или браузерах IE ?? Попытка нацелиться на браузеры IE 8+ и на Firefox, не имеет значения, последняя версия (28.0) будет в порядке.

ОБНОВЛЕНИЕ: Firefox 57+ поддерживает тип ввода = дата

Вы можете попробовать webshims , который доступен на cdn +, только загружает полифилл, если это необходимо.

Вот демоверсия с CDN: http://jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

Если конфигурация по умолчанию не удовлетворяет, есть много способов настроить ее. Здесь вы найдете конфигуратор DatePicker .

Примечание. Хотя в будущем могут появиться новые выпуски исправлений ошибок для веб-сайта. Больше не будет крупных релизов. Это включает в себя поддержку jQuery 3.0 или любых новых функций.

Он находится в Firefox начиная с версии 51 (26 января 2017 г.), но по умолчанию не активирован (пока)

Чтобы активировать его:

о: конфигурации

dom.forms.datetime -> установлено в true

https://developer.mozilla.org/en-US/Firefox/Experimental_features

Существует простой способ избавиться от этого ограничения с помощью компонента datePicker, предоставляемого jQuery.

1. Включите библиотеки jQuery и jQuery UI (я все еще использую старую)

   • SRC = "JS / JQuery-1.7.2.js"
   • SRC = "JS / JQuery-UI-1.7.2.js"

2. Используйте следующий фрагмент

   $(function() {
        $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
   });

См. JQuery UI DatePicker - при необходимости измените формат даты .

Type = "date" не является действительной спецификацией на данный момент. Это концепция, которую разработала Google и которая содержится в их спецификациях whatwg (не является официальной) и поддерживается только частично Chrome.

http://caniuse.com/#search=date

Я бы не стал полагаться на этот тип ввода на данный момент. Было бы неплохо иметь, но я не предвижу, что этот действительно сделает это. Причина № 1 в том, что браузер слишком обременителен, чтобы определить лучший интерфейс для довольно сложного ввода. Подумайте об этом с точки зрения отзывчивости. Как любой из поставщиков узнает, что будет лучше всего работать с вашим пользовательским интерфейсом, например, с шириной 400, 800 и 1200 пикселей?

Вот полный пример с датой в формате ГГГГ-ММ-ДД

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />

Хотя это не позволяет вам получить пользовательский интерфейс datepicker, Mozilla разрешает использование шаблона, так что вы можете по крайней мере получить подтверждение даты с помощью чего-то вроде этого:

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

В конечном счете, я согласен с @SuperUberDuper в том, что Mozilla значительно отстала от этого.

Это всего лишь предположение, которое следует за ответом Дакса. (Я бы добавил это в комментарии к этому ответу, но у меня пока недостаточно репутации, чтобы комментировать другие вопросы).

Идентификаторы должны быть уникальными для каждого поля, поэтому, если у вас есть несколько полей даты в вашей форме (или формах), вы можете использовать элемент class вместо идентификатора:

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

и ваш вклад как:

 <input type="text" class="datepicker" name="your-name" />

Теперь, каждый раз, когда вам нужен выбор даты, просто добавьте этот класс. PS Я знаю, вы все равно должны использовать js :(, но, по крайней мере, вы настроены для всего вашего сайта. Мои 2 цента ...

Последняя версия firefox the firefox 57 (Quantum) поддерживает дату и другие функции, выпущенные 14 ноября 2017 года. Вы можете скачать ее, перейдя по этой ссылке

Спасибо Александр, я нашел способ, как изменить формат для en lang. (Не знал, какой язык использует такой формат)

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');

Иногда вы не хотите использовать Datepicker http://jqueryui.com/datepicker/ в вашем проекте, потому что:

• Вы не хотите использовать JQuery
• Конфликт версий jquery в вашем проекте
• Выбор года не удобен. Например, вам нужно 120 нажатий на кнопку «Предыдущая», чтобы перейти на 10 лет назад.

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

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>

Вот правильное решение. Вы должны использовать JQuery DatePicker везде

  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>

Ниже приведена ссылка для получения полного кода

https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker

Вот идеальное решение. Вы должны использовать JQuery datepicker для ввода даты пользователем. Он очень прост в использовании и обладает множеством функций, которых нет у даты ввода HTML.

Нажмите здесь, чтобы скопировать код JQuery datepicker

Мне пришлось использовать bootstrap-datepickerплагин, чтобы календарь работал на Firefox 55 Portable:

https://bootstrap-datepicker.readthedocs.io/en/latest/

Совместим с Bootstrap v2 и v3. Он поставляется с отдельной таблицей стилей, поэтому вам не нужно зависеть от Bootstrap.

Использование:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>