Как сделать поддерживается на всех браузерах? Есть альтернативы?

Question

Как сделать поддерживается на всех браузерах? Есть альтернативы?

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

10 55

javascript html jquery html5 jquery-ui-sortable

10 ответов:

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

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

12

вы просили пример 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>
Я надеюсь, что это работает для вас.

7

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

6

   <script type="text/javascript">
      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"></p>
 </form>
</body>

Источник 1 & источник 2

5

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

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

3

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

2

<html>
<head>
<title>Date picker works for all browsers(IE,Firefox,Crome)</title>
<script type="text/javascript">
    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

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

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>

0

Я был возникли проблемы с этим, поддерживая Великобритании ДД/ММ/гггг формат, я изначально использовал ответа от adeneo https://stackoverflow.com/a/18021130/243905 но это не работает в Safari для меня настолько изменился к этому, насколько я могу сказать, работает все более - использование jQuery-интерфейс управления 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

adeneo · Accepted Answer · 2017-02-14 06:20:41

любой браузер, который не поддерживает ввод типа date будет по умолчанию стандартный тип, который является text, поэтому все, что вам нужно сделать, это проверить тип свойства(нет атрибута), если не date, ввод даты не поддерживается браузером, и вы добавляете свой собственный datepicker:
if ( $('[type="date"]').prop('type') != 'date' ) {
    $('[type="date"]').datepicker();
}
скрипка

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

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