it-swarm.com.de

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

Ich arbeite mit Eingabeattributen für HTML5-Elemente, und nur Google Chrome unterstützt die Datums- und Uhrzeitattribute. Ich habe versucht, Modernizr aber ich kann nicht verstehen, wie ich es auf meiner Website einbinden kann (wie man es codiert/was ist die Syntax/beinhaltet). Ein beliebiges Code-Snippet zur Verwendung von Datums- und Zeitattributen für alle Browser. 

63
leonardeveloper

Jeder Browser, der den Eingabetyp date nicht unterstützt, verwendet standardmäßig den Standardtyp text. Sie müssen also nur den Typ property _ ​​(nicht das Attribut) überprüfen, falls vorhanden nicht date, die Datumseingabe wird vom Browser nicht unterstützt und Sie fügen Ihren eigenen Datumsauswahlbereich hinzu:

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

GEIGE

Sie können natürlich jedes Datepicker verwenden, das Sie möchten. Der Datepicker von jQuery UI ist wahrscheinlich der am häufigsten verwendete, aber er fügt einiges Javascript hinzu, wenn Sie die UI-Bibliothek nicht für andere Zwecke verwenden. Es gibt jedoch Hunderte alternativer Datepicker wählen von.

Das type-Attribut ändert sich nie, der Browser wird nur auf den Standardtyp text für die Eigenschaft zurückgesetzt, sodass die Eigenschaft überprüft werden muss.
Das Attribut kann wie im obigen Beispiel weiterhin als Selektor verwendet werden.

92
adeneo

Modernizr ändert nichts an der Handhabung der neuen HTML5-Eingabetypen. Es ist eine Funktion detector, keine Unterlage (außer <header>, <article> usw.), die als Blockelemente behandelt werden sollen, die <div> ähnlich sind. 

Um <input type='date'> zu verwenden, müssen Sie Modernizr.inputtypes.date in Ihrem eigenen Skript überprüfen. Wenn es falsch ist, aktivieren Sie ein anderes Plugin, das eine Datumsauswahl enthält. Sie haben Tausende zur Auswahl; Modernizr unterhält eine nicht erschöpfende Liste von Polyfills , die Ihnen einen Anfang geben könnte. Alternativ können Sie einfach loslassen - alle Browser greifen auf text zurück, wenn ihnen ein Eingabetyp angezeigt wird, den sie nicht kennen. Das Schlimmste, was passieren kann, ist, dass Ihr Benutzer das Datum eingeben muss. (Sie können ihnen einen Platzhalter geben oder etwas wie jQuery.maskedinput verwenden, um sie auf Kurs zu halten.)

12
jfmatt

Sie haben nach dem Modernizr-Beispiel gefragt, also los geht's. Dieser Code erkennt mit Modernizr, ob der Eingabetyp 'date' unterstützt wird. Wenn es nicht unterstützt wird, schlägt JQueryUI datepicker fehl.

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 für dich.

7
Tim S

Dies ist ein bisschen ein Meinungsbild, aber wir hatten großen Erfolg mit WebShims . Die Verwendung von jQuery Datepicker kann fehlerfrei erfolgen, wenn native nicht verfügbar ist. Demo hier

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>

QUELLE 1 & QUELLE 2

5

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

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

3
Rápli András

Chrome Version 50.0.2661.87 unterstützt das mm-dd-yy-Format nicht, wenn es einer Variablen zugewiesen wird. Es verwendet yy-mm-dd. IE und Firefox funktionieren wie erwartet.

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

die einfachste und funktionellste Lösung, die ich gefunden habe, ist die Arbeit mit 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>
    
0
Kashif Latif

Ich hatte Probleme damit, das Format UK/TT/MM/JJJJ beizubehalten. Ich verwendete anfangs die Antwort von adeneo https://stackoverflow.com/a/18021130/243905 , aber das funktionierte nicht für mich änderte sich zu diesem, was, soweit ich das beurteilen kann, überall funktioniert - mit dem Jquery-ui Datepicker, der Jquery-Validierung.

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

Two-Script-Include-Lösung (2019):

Fügen Sie einfach Better-Dom und Better-Dateinput-Polyfill in deinem Skriptbereich.

Hier ist eine Demo:
http://chemerisuk.github.io/better-dateinput-polyfill/

0
Bijan