it-swarm.com.ru

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

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

63
leonardeveloper

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

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

СКРИПКА

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

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

92
adeneo

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

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

12
jfmatt

Вы просили модернизировать пример, так что вот, пожалуйста. Этот код использует Modernizr для определения того, поддерживается ли тип ввода date. Если он не поддерживается, он возвращается к 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>

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

7
Tim S

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

6
Antti Haapala
   <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

5
Ritabrata Gautam

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

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

3
Rápli András

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

2
Kelvin
<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>
0
Amol Shirude

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

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

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

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
nat