Как сделать <input type = "date" > поддерживаемым во всех браузерах? Любые альтернативы?

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

Ответ 1

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

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

FIDDLE

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

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

Ответ 2

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

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

Ответ 3

Вы попросили пример 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>

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

Ответ 4

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

Ответ 5

   <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

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

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

Ответ 7

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

Ответ 8

<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>

Ответ 9

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

Google Chrome
Firefox
Microsoft Edge

Safari

<!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>

Ответ 10

У меня были проблемы с этим, поддерживая формат Великобритании dd/mm/yyyy, я изначально использовал ответ от adeneo fooobar.com/questions/122101/..., но это не работало в сафари для меня это так изменилось, что, насколько я могу судить, работает повсюду - с помощью 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;
    }
}

Ответ 11

Для этого есть очень простое и эффективное решение с использованием фильтра. Вы просто добавляете следующий фильтр в свой файл functions.php:

 add_filter( 'wpcf7_support_html5_fallback', '__return_true' );