Як зробити <input type = “date”> підтримуваним у всіх браузерах? Будь-які альтернативи?

83

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

javascript  jquery  html  jquery-ui 
— леонардевелопер
джерело
Який тип контролю ви використовуєте Datepicker ?? можливо інтерфейс JQuery був би ідеальним ??
— Себастьян,
10
Зверніть увагу, що якщо ви ще чогось не покладаєтеся на jQueryUI, включаючи його гігантську вагу, просто для того, щоб ввести дату, це не повинно бути рішенням за замовчуванням.
— jfmatt
Повний приклад наведено за адресою html5doctor.com/…
— koppor

Відповіді:

116

Будь-який браузер, який не підтримує тип введення date, за замовчуванням буде стандартним типом, тобто textвсе, що вам потрібно зробити, це перевірити властивість type (не атрибут) , якщо це не так date, дата введення не підтримується браузером, і ви додаєте свій власний датчик:

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

Скрипка

Ви, звичайно, можете використовувати будь-який datepicker, який ви хочете, jQuery UI's datepicker є, мабуть, найбільш часто використовуваним, але він додає трохи javascript, якщо ви не використовуєте UI-бібліотеку для чогось іншого, але є сотні альтернативних datapicker на вибір.

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

— adeneo
джерело
1
Може бути краще використовувати jQuery для перевірки властивості, а не опускатись до DOM? $('input').prop('type') != 'date'
— IMSoP
9
DOM швидше, ні?
— reaper_unique
6
Поки "тип" вводу змінюється на "текст", якщо "дата" не підтримується, атрибут "тип" залишається "датою". Тож це можна легко використовувати як селектор. Я оновив скрипку таким чином: jsfiddle.net/2AaFk/34
— Michael Wyraz
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

— Рітабрата Гаутам
джерело
3

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

Плюс переходьте за посиланнями, розміщеними в цій темі. Це допоможе вам: дата введення типу HTML5, колір, підтримка діапазону у Firefox та Internet Explorer

— Раплі Андраш
джерело
2

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

— Кельвін
джерело
2

Найкраще просте і робоче рішення, яке я знайшов, - це робота над наступними браузерами

  1. Гугл хром
  2. Firefox
  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

У мене були проблеми з цим, підтримка формату Великобританії 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>
— Амол Шируде
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.