Wie kann <input type = "date"> in allen Browsern unterstützt werden? Irgendwelche Alternativen?

83

Ich arbeite mit Eingabeattributen für HTML5-Elemente und nur Google Chrome unterstützt die Datums- und Zeitattribute. Ich habe Modernizr ausprobiert , kann aber nicht verstehen, wie ich es in meine Website integrieren soll (wie man es codiert / wie lautet die Syntax / enthält). Jeder Code-Ausschnitt, der zeigt, wie mit Datums- und Zeitattributen für alle Browser gearbeitet wird.

javascript jquery html jquery-ui leonardeveloper
quelle
Welche Art von Kontrolle verwenden Sie einen Datepicker? Vielleicht wäre JQuery UI perfekt?
Sebastien
10
Bitte beachten Sie, dass es keine Standardentscheidung sein sollte, wenn Sie sich nicht bereits für etwas auf jQueryUI verlassen, einschließlich des gigantischen Gewichts, nur um eine Datumseingabe zu korrigieren.
jfmatt
Ein vollständiges Beispiel finden Sie unter html5doctor.com/…
koppor

Antworten:

116

Jeder Browser, der den Eingabetyp nicht unterstützt, verwendet datestandardmäßig den Standardtyp. textSie müssen also nur die Typeneigenschaft (nicht das Attribut) überprüfen. Wenn dies nicht dateder Fall ist, wird die Datumseingabe vom Browser nicht unterstützt. und Sie fügen Ihren eigenen Datepicker hinzu:

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

GEIGE

Sie können natürlich jeden gewünschten Datepicker verwenden. Der Datepicker von jQuery UI ist wahrscheinlich der am häufigsten verwendete, aber er fügt einiges an Javascript hinzu, wenn Sie die UI-Bibliothek nicht für andere Zwecke verwenden, aber es gibt Hunderte von alternativen Datepickern wählen von.

Das typeAttribut ändert sich nie, der Browser greift nur auf den Standardtyp textfür die Eigenschaft zurück, sodass die Eigenschaft überprüft werden muss.
Das Attribut kann weiterhin wie im obigen Beispiel als Selektor verwendet werden.

Adeneo
quelle
1
Könnte es besser sein, jQuery zum Überprüfen der Eigenschaft zu verwenden, als in das DOM zu wechseln? $('input').prop('type') != 'date'
IMSoP
9
DOM ist schneller, nein?
reaper_unique
6
Während "Typ" der Eingabe in "Text" geändert wird, wenn "Datum" nicht unterstützt wird, bleibt das Attribut "Typ" "Datum". Dies kann also leicht als Selektor verwendet werden. Ich habe die Geige folgendermaßen aktualisiert: jsfiddle.net/2AaFk/34
Michael Wyraz
2
@ MichaelWyraz Als ich deine Geige überprüft habe, scheint es im Safari-Browser nicht zu funktionieren.
Rishabh Seth
1
Dies hat bei mir funktioniert. Beachten Sie jedoch, dass ich nicht über das erforderliche CSS verfüge und es in diesem Thread gefunden habe: stackoverflow.com/a/29791769/1339326 <link rel = "stylesheet" href = "// code.jquery.com /ui/1.11.2/themes/smoothness/jquery-ui.css ">
magorich
14

Modernizr ändert eigentlich nichts daran, wie die neuen HTML5-Eingabetypen behandelt werden. Es ist ein Merkmal Detektor , kein Shim (außer <header>, <article>usw., die als Blockelemente ähnlich wie behandelt werden Beilagscheiben <div>).

Um es zu verwenden <input type='date'>, müssen Sie Modernizr.inputtypes.dateIhr eigenes Skript einchecken. Wenn es falsch ist, aktivieren Sie ein anderes Plugin, das eine Datumsauswahl bietet. Sie haben Tausende zur Auswahl; Modernizr führt eine nicht erschöpfende Liste von Polyfills , die Ihnen möglicherweise einen Ausgangspunkt bieten. Alternativ können Sie es einfach loslassen - alle Browser greifen auf texteinen Eingabetyp zurück, den sie nicht erkennen. Das Schlimmste, was passieren kann, ist, dass Ihr Benutzer das Datum eingeben muss. (Vielleicht möchten Sie ihnen einen Platzhalter geben oder etwas wie jQuery.maskedinput verwenden, um sie auf dem Laufenden zu halten.)

jfmatt
quelle
11

Sie haben nach einem Modernizr-Beispiel gefragt, also los geht's. Dieser Code verwendet Modernizr, um festzustellen, ob der Eingabetyp "Datum" unterstützt wird. Wenn es nicht unterstützt wird, schlägt es auf JQueryUI datepicker zurück.

Hinweis: Sie müssen JQueryUI herunterladen und möglicherweise die Pfade zu den CSS- und JS-Dateien in Ihrem eigenen Code ändern.

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

Ich hoffe das funktioniert bei dir.

Tim S.
quelle
Beachten Sie, dass Sie für Modernizr 3 die Konfiguration mit modernizr.com/download?inputtypes-setclasses generieren und das Javascript kompilieren müssen, wie unter 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>

QUELLE 1 & QUELLE 2

Ritabrata Gautam
quelle
6

Dies ist eine Art Meinungsbeitrag, aber wir hatten großen Erfolg mit WebShims . Die Verwendung von jQuery datepicker kann fehlerhaft sein, wenn native nicht verfügbar ist. Demo hier

Antti Haapala
quelle
3

Verwenden Sie einfach <script src="modernizr.js"></script>in diesem <head>Abschnitt, und das Skript fügt Klassen hinzu, mit denen Sie die beiden Fälle trennen können: ob es vom aktuellen Browser unterstützt wird oder nicht.

Folgen Sie außerdem den Links in diesem Thread. Es wird Ihnen helfen: HTML5-Eingabetyp Datum, Farbe, Bereichsunterstützung in Firefox und Internet Explorer

Rápli András
quelle
2

Chrome Version 50.0.2661.87 m unterstützt das Format MM-TT-JJ nicht, wenn es einer Variablen zugewiesen wird. Es wird JJ-MM-TT verwendet. IE und Firefox funktionieren wie erwartet.

Kelvin
quelle
2

Die beste einfache und funktionierende Lösung, die ich gefunden habe, ist die Arbeit an folgenden Browsern

  1. Google Chrome
  2. Feuerfuchs
  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
quelle
0

Ich hatte Probleme damit, das britische TT / MM / JJJJ-Format beizubehalten. Ich habe zunächst die Antwort von Adeneo https://stackoverflow.com/a/18021130/243905 verwendet, aber das hat in Safari für mich nicht funktioniert. was, soweit ich das beurteilen kann, überall funktioniert - mit dem 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;
    }
}
nat
quelle
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
quelle