Jak zapewnić obsługę <input type = „date”> we wszystkich przeglądarkach? Jakieś alternatywy?

83

Pracuję z atrybutami wejściowymi elementów HTML5 i tylko Google Chrome obsługuje atrybuty daty i czasu. Próbowałem Modernizr, ale nie mogę zrozumieć, jak go zintegrować na mojej stronie internetowej (jak go zakodować / jaka jest składnia / zawiera). Dowolny fragment kodu pokazujący, jak pracować z atrybutami daty i godziny we wszystkich przeglądarkach.

javascript jquery html jquery-ui leonardeveloper
źródło
Jakiego rodzaju kontroli używasz w Datepicker? może interfejs użytkownika JQuery byłby idealny?
Sebastien
11
Zwróć uwagę, że jeśli jeszcze nie polegasz na jQueryUI, w tym na jego gigantycznej wadze tylko po to, aby ustawić datę, nie powinno to być decyzją domyślną.
jfmatt
Pełny przykład znajduje się pod adresem html5doctor.com/…
koppor

Odpowiedzi:

117

Każda przeglądarka, która nie obsługuje tego typu danych wejściowych, datebędzie domyślnie ustawiać na typ standardowy, co oznacza text, że jedyne co musisz zrobić, to sprawdzić właściwość type (nie atrybut) , jeśli nie date, wprowadzanie daty nie jest obsługiwane przez przeglądarkę, i dodajesz własnego datepicker:

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

SKRZYPCE

Możesz oczywiście użyć dowolnego datepickera, prawdopodobnie najczęściej używanego jest datepicker jQuery UI, ale dodaje sporo javascript, jeśli nie używasz biblioteki UI do niczego innego, ale istnieją setki alternatywnych datepickerów do wybrania z.

Plik typeAtrybut nigdy się nie zmienia, przeglądarka spadnie tylko z powrotem do domyślnego texttypu dla właściwości, więc trzeba sprawdzić właściwość.
Atrybut może nadal służyć jako selektor, jak w powyższym przykładzie.

adeneo
źródło
1
Może lepiej byłoby użyć jQuery do sprawdzenia właściwości, zamiast przechodzić do modelu DOM? $('input').prop('type') != 'date'
IMSoP
Możesz także filtrować tekst, który chcesz przechowywać fragmenty tekstu, możesz to zrobić, dodając class = "date" lub coś w tym stylu
Owen Beresford,
6
Podczas gdy „typ” wejścia zmienia się na „tekst”, jeśli „data” nie jest obsługiwana, atrybut „typ” pozostaje „datą”. Więc można go łatwo użyć jako selektora. Zaktualizowałem skrzypce w ten sposób: jsfiddle.net/2AaFk/34
Michael Wyraz
2
@MichaelWyraz, gdy sprawdzałem twoje skrzypce, wygląda na to, że nie działa w przeglądarce safari.
Rishabh Seth
1
To zadziałało dla mnie, po prostu zauważ, że nie mam wymaganego css i znalazłem go w tym wątku: stackoverflow.com/a/29791769/1339326 <link rel = "stylesheet" href = "// code.jquery.com /ui/1.11.2/themes/smoothness/jquery-ui.css ">
magorich
14

Modernizr właściwie nie zmienia niczego w sposobie obsługi nowych typów danych wejściowych HTML5. Jest to cecha detektora , a nie podkładki (z wyjątkiem <header>, <article>itp, które to podkładek być traktowane jako elementy blokowe podobnej do <div>).

Aby go użyć <input type='date'>, musisz sprawdzić Modernizr.inputtypes.datewłasny skrypt, a jeśli jest fałszywy, włącz inną wtyczkę, która zapewnia selektor daty. Masz tysiące do wyboru; Modernizr prowadzi niewyczerpującą listę polyfillów, od których możesz zacząć. Ewentualnie możesz po prostu odpuścić - wszystkie przeglądarki wracają do, textgdy są przedstawiane z typem danych wejściowych, których nie rozpoznają, więc najgorsze, co może się zdarzyć, jest to, że użytkownik musi wpisać datę. (Możesz chcieć dać im symbol zastępczy lub użyć czegoś takiego jak jQuery.maskedinput, aby utrzymać je na właściwym torze).

jfmatt
źródło
11

Poprosiłeś o przykład Modernizr, więc proszę bardzo. Ten kod używa programu Modernizr do wykrywania, czy typ danych wejściowych „data” jest obsługiwany. Jeśli nie jest obsługiwany, nie powraca do wyboru daty JQueryUI.

Uwaga: będziesz musiał pobrać JQueryUI i ewentualnie zmienić ścieżki do plików CSS i JS we własnym kodzie.

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

Mam nadzieję, że to działa dla Ciebie.

Tim S.
źródło
Zwróć uwagę, że dla Modernizr 3 musisz wygenerować konfigurację za pomocą modernizr.com/download?inputtypes-setclasses i skompilować javascript zgodnie z opisem na 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>

ŹRÓDŁO 1 I ŹRÓDŁO 2

Ritabrata Gautam
źródło
6

To trochę opinia, ale odnieśliśmy wielki sukces z WebShims . Jeśli natywny nie jest dostępny, użycie jQuery datepicker może się zepsuć. Demo tutaj

Antti Haapala
źródło
2

Chrome w wersji 50.0.2661.87 m nie obsługuje formatu mm-dd-rr po przypisaniu do zmiennej. Używa rr-mm-dd. IE i Firefox działają zgodnie z oczekiwaniami.

kelwin
źródło
2

najlepszym łatwym i działającym rozwiązaniem, jakie znalazłem, jest praca na następujących przeglądarkach

  1. Google Chrome
  2. Firefox
  3. Microsoft Edge

  4. 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>
Kashif Latif
źródło
0

Miałem z tym problemy, utrzymując brytyjski format dd / mm / rrrr, początkowo użyłem odpowiedzi z adeneo https://stackoverflow.com/a/18021130/243905, ale to nie zadziałało dla mnie w safari, więc zmieniłem na to, który, o ile wiem, działa wszędzie - używając jquery-ui datepicker, walidacji 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;
    }
}
nat
źródło
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>
Amol Shirude
źródło