web-dev-qa-db-fra.com

Comment faire en sorte que <input type = "date"> soit supporté par tous les navigateurs? Des alternatives?

Je travaille avec des attributs d'entrée d'éléments HTML5 et seul Google Chrome prend en charge les attributs de date et d'heure. J'ai essayé Modernizr mais je ne comprends pas comment l’intégrer sur mon site Web (comment le coder/quelle est la syntaxe/comprend). N'importe quel extrait de code indiquant comment utiliser les attributs de date et d'heure de tous les navigateurs. 

javascriptjqueryhtmlhtml5jquery-ui
63
leonardeveloper

Tout navigateur qui ne prend pas en charge le type d’entrée date adopte par défaut le type standard text. Il vous suffit donc de vérifier le type property _ ​​(pas l’attribut), si c’est pas date, la saisie de la date n’est pas prise en charge par le navigateur et vous ajoutez votre propre datepicker:

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

FIDDLE

Vous pouvez bien sûr utiliser le datepicker de votre choix. Le datepicker de jQuery UI est probablement le plus utilisé, mais il ajoute un peu de javascript si vous n'utilisez pas la bibliothèque de l'interface utilisateur, mais il existe des centaines d'autres datpickers à choisir.

L'attribut type ne change jamais, le navigateur n'utilisant que le type par défaut text pour la propriété, il est donc nécessaire de vérifier la propriété.
L’attribut peut toujours être utilisé comme sélecteur, comme dans l’exemple ci-dessus.

92
adeneo

Modernizr ne change rien à la gestion des nouveaux types d’entrée HTML5. C'est une caractéristique détecteur, pas une cale (sauf pour <header>, <article>, etc., qu'elle cède pour être traitée comme des éléments de bloc similaires à <div>). 

Pour utiliser <input type='date'>, vous devez cocher Modernizr.inputtypes.date dans votre propre script et, s'il est faux, activer un autre plug-in proposant un sélecteur de date. Vous avez le choix parmi des milliers; Modernizr maintient une liste non exhaustive de polyfill qui pourrait vous donner un point de départ. Alternativement, vous pouvez simplement le laisser aller - tous les navigateurs retombent en text lorsqu'ils se voient présenter un type d'entrée qu'ils ne reconnaissent pas. Le pire qui puisse arriver est que votre utilisateur doit taper la date. (Vous pouvez leur donner un espace réservé ou utiliser quelque chose comme jQuery.maskedinput pour les garder sur la bonne voie.)

12
jfmatt

Vous avez demandé par exemple Modernizr, alors voilà. Ce code utilise Modernizr pour détecter si le type d’entrée 'date' est pris en charge. S'il n'est pas pris en charge, il échoue dans JQueryUI datepicker.

Remarque: vous devrez télécharger JQueryUI et éventuellement modifier les chemins d'accès aux fichiers CSS et JS dans votre propre code.

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

J'espère que cela fonctionne pour vous.

7
Tim S

C'est un peu un article d'opinion, mais nous avons eu un grand succès avec WebShims . Il est possible d'utiliser jQuery DatePicker de manière appropriée si l'option native n'est pas disponible. Démo ici

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>

SOURCE 1 & SOURCE 2

5
Ritabrata Gautam

Utilisez simplement <script src="modernizr.js"></script> dans la section <head>, et le script ajoutera des classes qui vous aideront à séparer les deux cas: s'il est supporté par le navigateur actuel ou non.

De plus, suivez les liens affichés dans ce fil. Il vous aidera: Prise en charge du type d’entrée HTML5 par la date, la couleur et la plage dans Firefox et Internet Explorer

3
Rápli András

La version de Chrome 50.0.2661.87 m ne prend pas en charge le format mm-jj-aa si elle est affectée à une variable. Il utilise aa-mm-jj. IE et Firefox fonctionnent comme prévu.

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

la meilleure solution facile et efficace que j'ai trouvée est de travailler sur les navigateurs suivants.

  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>
0
Kashif Latif

J'avais des problèmes avec cela, maintenant le format britannique jj/mm/aaaa, j'ai d'abord utilisé la réponse de adeneo https://stackoverflow.com/a/18021130/243905 mais cela n'a pas fonctionné dans un safari pour moi changé pour cela, qui pour autant que je sache fonctionne de partout - en utilisant le 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;
    }
}
0
nat

Deux scripts, inclure-solution (2019):

Il suffit d'inclure Better-Dom et Better-Dateinput-Polyfill dans votre section de scripts.

Voici une démo:
http://chemerisuk.github.io/better-dateinput-polyfill/

0
Bijan