Comment faire <input type=“date”> prise en charge sur tous les navigateurs? Des alternatives?

Je travaille avec des éléments HTML5 et les attributs d'entrée seulement Google Chrome est compatible avec la date, les attributs de temps. J'ai essayé Modernizr mais je ne peux pas comprendre comment l'intégrer sur mon site(sur la façon de le code qu'il/qu'est-ce que la syntaxe/includes). Un fragment de code il sur la façon de travailler avec la date, l'heure des attributs pour tous les navigateurs.

Ce type de contrôle utilisez-vous un Datepicker?? peut-être que JQuery UI serait parfait??
Veuillez noter que si vous n'êtes pas déjà en s'appuyant sur jQueryUI pour quelque chose, y compris sa gigantesque poids juste pour caler une date d'entrée ne doit pas être une décision par défaut.
Un exemple complet est fourni dans le html5doctor.com/...

InformationsquelleAutor leonardeveloper | 2013-08-02

106

N'importe quel navigateur qui ne prend pas en charge le type d'entrée date par défaut pour le type standard, qui est text, de sorte que tous vous avez à faire est de vérifier le type propriété (pas l'attribut), si ce n'est pas date, la date d'entrée n'est pas supporté par le navigateur, et vous ajoutez votre propre datepicker:
```
if ( $('[type="date"]').prop('type') != 'date' ) {
    $('[type="date"]').datepicker();
}
```
VIOLON

Vous pouvez bien sûr utiliser n'importe datepicker vous voulez, jQuery UI datepicker est probablement la plus couramment utilisée, mais elle ne ajouter un peu de javascript si vous n'êtes pas à l'aide de la bibliothèque d'INTERFACE utilisateur pour autre chose, mais il y a des centaines de rechange datepickers à choisir.

La type attribut ne change jamais, le navigateur ne fait que revenir à la valeur par défaut text type de la propriété, de sorte que l'on doit vérifier la propriété.

L'attribut peut encore être utilisé comme sélecteur, comme dans l'exemple ci-dessus.
- Peut-être mieux utiliser jQuery pour vérifier la propriété plutôt que de descendre dans les DOM? $('input').prop('type') != 'date'
- DOM est plus rapide, non?
- Vous pouvez également certains de filtre pour la saisie de texte que vous voulez garder des morceaux de texte, qui pourrait être fait par l'ajout d'une class="date" ou quelque chose
- Tandis que le "type" de l'entrée des modifications de texte "" si "date" n'est pas pris en charge, l'attribut "type" reste "date". Donc cela peut facilement utilisé comme sélecteur. J'ai mis à jour le violon de cette façon: jsfiddle.net/2AaFk/34
- comme je l'ai vérifié votre violon , il semble notworking sur le navigateur safari.
- Cela a fonctionné pour moi, il suffit de remarquer que j'ai retrouver pas les css et je l'ai trouvé sur ce thread: stackoverflow.com/a/29791769/1339326 <link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
- Cela ne fonctionne pas pour moi. Quelqu'un a le même problème, il suffit d'ajouter ce filtre à votre functions.php fichier : add_filter( 'wpcf7_support_html5_fallback', '__return_true' );
- Votre méthode de travail pour moi. Nice
InformationsquelleAutor adeneo
14

Modernizr ne change en fait rien de la façon dont le nouveau HTML5 types d'entrée sont traitées. C'est une fonctionnalité détecteur de, pas d'une cale d'épaisseur (sauf pour <header>, <article>, etc., qui il des cales pour être traitées comme des éléments de bloc similaire à <div>).

À utiliser <input type='date'>, vous auriez besoin de vérifier Modernizr.inputtypes.date dans votre propre script, et si c'est faux, tourner sur un autre plugin qui fournit un sélecteur de date. Vous avez des milliers à choisir; Modernizr maintient une liste non exhaustive des polyfills qui vous donnera peut-être quelque part au début. Alternativement, vous pouvez simplement laisser aller - tous les navigateurs revenir à text lorsqu'ils sont présentés avec un input type qu'ils ne reconnaissent pas, donc, dans le pire qui puisse arriver est que votre utilisateur doit saisir la date. (Vous pourriez voulez leur donner un espace réservé ou utiliser quelque chose comme jQuery.maskedinput à garder sur la bonne voie.)

InformationsquelleAutor jfmatt

Vous avez demandé Modernizr exemple, si vous pouvez y aller. Ce code utilise Modernizr pour détecter si le "date" type d'entrée est pris en charge. Si elle n'est pas prise en charge, alors il échoue à JQueryUI datepicker.

Remarque: Vous aurez besoin de télécharger JQueryUI et éventuellement modifier les chemins pour les 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.

Notez que pour Modernizr 3, vous devez générer le fichier de configuration à l'aide de modernizr.com/download?inputtypes-setclasses et de compiler le code javascript comme décrit dans le modernizr.com/docs/#downloading-modernizr

InformationsquelleAutor Tim S

6

Cela est un peu d'un texte d'opinion, mais nous avons eu beaucoup de succès avec WebShims. Il peut pourrir proprement utiliser jQuery datepicker si le natif n'est pas disponible. Démo ici

InformationsquelleAutor 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"  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

InformationsquelleAutor Ritabrata Gautam

3

Suffit d'utiliser <script src="modernizr.js"></script> dans le <head> section, et le script d'ajouter les classes qui vous aident à séparer les deux cas: si c'est pris en charge par le navigateur, ou si elle ne l'est pas.

Plus qu'à suivre les liens posté dans ce thread. Il vous aidera à: HTML5 de saisie de type date, la couleur, la gamme de support dans les navigateurs Firefox et Internet Explorer

InformationsquelleAutor Rápli András
2

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

InformationsquelleAutor Kelvin

meilleur facile et la solution que j'ai trouvé est, de travail sur les navigateurs suivants

Google Chrome
Firefox
Microsoft Bord

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>

InformationsquelleAutor Kashif Latif

1

Deux-Script-Inclure-Solution (2019):

Il suffit d'inclure Mieux-Dom et Mieux Dateinput-Polyfill dans vos scripts section.

Voici une Démo:

http://chemerisuk.github.io/better-dateinput-polyfill/

InformationsquelleAutor Bijan

J'ai eu des problèmes avec cela, le maintien du royaume-UNI jj/mm/aaaa, j'ai d'abord utilisé la réponse de adeneo https://stackoverflow.com/a/18021130/243905 mais qui ne fonctionne pas dans safari pour moi donc changé à ce, qui, autant que je peux dire de toutes les œuvres de la sur - utilisation de jquery-ui datepicker jquery de 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;
    }
}

InformationsquelleAutor nat

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

InformationsquelleAutor Amol Shirude

-3

Il est très simple et efficace solution pour cette utilisation du filtre. Il suffit d'ajouter le filtre suivant pour votre functions.php fichier :
```
 add_filter( 'wpcf7_support_html5_fallback', '__return_true' );
```
InformationsquelleAutor ibrahim konuk

Vous devez vous connecter pour publier un commentaire.

Deux-Script-Inclure-Solution (2019):