Как сделать так, чтобы <input type = «date»> поддерживался во всех браузерах? Есть альтернативы?

83

Я работаю с атрибутами ввода элементов HTML5, и только Google Chrome поддерживает атрибуты даты и времени. Я пробовал Modernizr, но не могу понять, как интегрировать его на свой веб-сайт (как его кодировать / каков синтаксис / включает). Любой фрагмент кода о том, как работать с атрибутами даты и времени для всех браузеров.

javascript jquery html jquery-ui леонар разработчик
источник
Какой контроль вы используете Datepicker? может быть, JQuery UI был бы идеальным ??
Себастьян
11
Обратите внимание, что если вы еще не полагаетесь на jQueryUI в чем-то, в том числе на его гигантский вес, просто чтобы прокладывать ввод даты, не следует принимать решение по умолчанию.
jfmatt 02
Полный пример представлен на html5doctor.com/…
koppor

Ответы:

117

Любой браузер, который не поддерживает тип ввода date, по умолчанию будет использовать стандартный тип, то есть textвсе, что вам нужно сделать, это проверить свойство типа (а не атрибут) , если это не так date, ввод даты не поддерживается браузером, и вы добавляете свой собственный datepicker:

if ( $('[type="date"]').prop('type') != 'date' ) {
    $('[type="date"]').datepicker();
}

FIDDLE

Вы, конечно, можете использовать любой datepicker, который хотите, datepicker jQuery UI, вероятно, наиболее часто используемый, но он добавляет довольно много javascript, если вы не используете библиотеку UI для чего-либо еще, но есть сотни альтернативных datepicker выбирать из.

typeАтрибут никогда не меняется, браузер будет только падать обратно по умолчанию textтипа для свойства, поэтому нужно проверить свойство.
Атрибут по-прежнему можно использовать в качестве селектора, как в примере выше.

аденео
источник
1
Может быть, лучше использовать jQuery для проверки свойства, а не переходить к DOM? $('input').prop('type') != 'date'
IMSoP 02
Вы также можете использовать некоторый фильтр для ввода текста, который вы хотите сохранить, можно сделать, добавив class = "date" или что-то в этом роде
Оуэн Бересфорд
6
В то время как «тип» ввода меняется на «текст», если «дата» не поддерживается, атрибут «тип» остается «дата». Так что это можно легко использовать как селектор. Я обновил скрипку следующим образом: jsfiddle.net/2AaFk/34
Майкл Вайраз,
2
@MichaelWyraz, как я проверил вашу скрипку, похоже, не работает в браузере сафари.
Ришаб Сет
1
Это сработало для меня, просто обратите внимание, что у меня нет необходимого css, и я нашел его в этой теме: stackoverflow.com/a/29791769/1339326 <link rel = "stylesheet" href = "// code.jquery.com /ui/1.11.2/themes/smoothness/jquery-ui.css ">
magorich
14

Modernizr фактически ничего не меняет в том, как обрабатываются новые типы ввода HTML5. Это функция детектора , а не прокладка (за исключением <header>, <article>и т.д., которые он Проставки быть обработаны в качестве блочных элементов , аналогичных<div> ).

Чтобы использовать <input type='date'>, вам нужно будет проверить Modernizr.inputtypes.dateсвой собственный скрипт, и если он неверен, включите другой плагин, который предоставляет селектор даты. У вас есть тысячи на выбор; Modernizr поддерживает неполный список полифилов , с которых можно начать. В качестве альтернативы вы можете просто отпустить - все браузеры возвращаются к использованию, textкогда им предоставляется тип ввода, который они не распознают, поэтому худшее, что может случиться, - это то, что ваш пользователь должен ввести дату. (Вы можете дать им заполнитель или использовать что-то вроде jQuery.maskedinput, чтобы держать их в курсе.)

jfmatt
источник
11

Вы просили пример Modernizr, так что готово. Этот код использует Modernizr, чтобы определить, поддерживается ли тип ввода «дата». Если он не поддерживается, он не возвращается к JQueryUI datepicker.

Примечание. Вам нужно будет загрузить JQueryUI и, возможно, изменить пути к файлам CSS и JS в вашем собственном коде.

<!DOCTYPE html>
<html>
    <head>
        <title>Modernizer Detect 'date' input type</title>
        <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css"/>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
        <script type="text/javascript">
            $(function(){
                if(!Modernizr.inputtypes.date) {
                    console.log("The 'date' input type is not supported, so using JQueryUI datepicker instead.");
                    $("#theDate").datepicker();
                }
            });
        </script>
    </head>
    <body>
        <form>
            <input id="theDate" type="date"/>
        </form>
    </body>
</html>

Надеюсь, это сработает для вас.

Тим С
источник
Обратите внимание, что для Modernizr 3 вам необходимо сгенерировать конфигурацию с помощью modernizr.com/download?inputtypes-setclasses и скомпилировать javascript, как описано на modernizr.com/docs/#downloading-modernizr
koppor
7 
   <script>
      var datefield = document.createElement("input")
      datefield.setAttribute("type", "date")
      if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
         document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
         document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
         document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
      }
   </script>

 <script>
    if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
       jQuery(function($) { // on document.ready
           $('#birthday').datepicker();
       }); <- missing semicolon
    }
 </script>


<body>
 <form>
   <b>Date of birth:</b>
   <input type="date" id="birthday" name="birthday" size="20">
   <input type="button" value="Submit" name="B1">
 </form>
</body>

ИСТОЧНИК 1 И ИСТОЧНИК 2

Ритабрата Гаутам
источник
6

Это немного мнение, но мы добились большого успеха с WebShims . Он может полностью разрушиться при использовании jQuery datepicker, если родной недоступен. Демо здесь

Антти Хаапала
источник
3

Просто используйте <script src="modernizr.js"></script>в<head> разделе, и скрипт добавит классы, которые помогут вам разделить два случая: если он поддерживается текущим браузером или нет.

Плюс следуйте ссылкам, размещенным в этой теме. Это поможет вам: дата типа ввода HTML5, цвет, поддержка диапазона в Firefox и Internet Explorer

Рапли Андраш
источник
2

Chrome версии 50.0.2661.87 m не поддерживает формат мм-дд-гг при присвоении переменной. Он использует гг-мм-дд. IE и Firefox работают как положено.

Кельвин
источник
2

Лучшее простое и рабочее решение, которое я нашел, - это работа над следующими браузерами

  1. Гугл Хром
  2. Fire Fox
  3. Microsoft Edge

  4. Сафари

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<h2>Poly Filler Script for Date/Time</h2>
<form method="post" action="">
    <input type="date" />
    <br/><br/>
    <input type="time" />
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {type: 'date'});
  webshims.setOptions('forms-ext', {type: 'time'});
  webshims.polyfill('forms forms-ext');
</script>

</body>
</html>
Кашиф Латиф
источник
0

У меня были проблемы с этим, поддерживая формат UK dd / mm / yyyy, я изначально использовал ответ от adeneo https://stackoverflow.com/a/18021130/243905, но это не сработало в сафари для меня, поэтому изменилось на это, который, насколько я могу судить, работает повсеместно - с использованием jquery-ui datepicker, проверки jquery.

if ($('[type="date"]').prop('type') !== 'date') {
    //for reloading/displaying the ISO format back into input again
    var val = $('[type="date"]').each(function () {
        var val = $(this).val();
        if (val !== undefined && val.indexOf('-') > 0) {
            var arr = val.split('-');
            $(this).val(arr[2] + '/' + arr[1] + '/' + arr[0]);
        }
    });

    //add in the datepicker
    $('[type="date"]').datepicker(datapickeroptions);

    //stops the invalid date when validated in safari
    jQuery.validator.methods["date"] = function (value, element) {
        var shortDateFormat = "dd/mm/yy";
        var res = true;
        try {
            $.datepicker.parseDate(shortDateFormat, value);
        } catch (error) {
            res = false;
        }
        return res;
    }
}
нац
источник
0 
<html>
<head>
<title>Date picker works for all browsers(IE, Firefox, Chrome)</title>
<script>
    var datefield = document.createElement("input")
    datefield.setAttribute("type", "date")
    if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
        document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
    }
</script>

<script>
    if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
        jQuery(function($) { // on document.ready
            $('#start_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
            $('#end_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
        })
    }
</script>
</head>
<body>
    <input name="start_date" id="start_date" type="date" required>
    <input name="end_date" id="end_date" required>
</body>
</html>
Амол Ширудэ
источник