Je travaille avec des attributs de saisie d'éléments HTML5 et seul Google Chrome supporte les attributs de date et d'heure. J'ai essayé Modernizr mais je n'arrive pas à comprendre comment l'intégrer sur mon site (comment le coder/quelle est la syntaxe/includes). Je ne sais pas s'il y a un extrait de code sur la façon de travailler avec les attributs de la date et de l'heure pour tous les navigateurs.
Réponses
Trop de publicités?
Tout navigateur qui ne prend pas en charge le type d'entrée date prendra par défaut le type standard, qui est text Il suffit donc de vérifier le type propriété (pas l'attribut) si ce n'est pas le cas date Si le navigateur ne prend pas en charge l'entrée de la date, vous ajoutez votre propre sélecteur de date :
if ( $('[type="date"]').prop('type') != 'date' ) {
$('[type="date"]').datepicker();
}Vous pouvez bien sûr utiliser n'importe quel datepicker, celui de jQuery UI est probablement le plus utilisé, mais il ajoute un peu de javascript si vous n'utilisez pas la bibliothèque UI pour autre chose, mais il y a des centaines d'autres datepickers parmi lesquels choisir.
En type ne change jamais, le navigateur se rabattra uniquement sur l'attribut par défaut text pour le bien, il faut donc vérifier le bien.
L'attribut peut toujours être utilisé comme sélecteur, comme dans l'exemple ci-dessus.
jfmatt
Points
906
Modernizr ne change rien à la façon dont les nouveaux types d'entrée HTML5 sont gérés. Il s'agit d'une fonctionnalité détecteur pas de cale (sauf pour les <header> , <article> etc., qu'il cale pour qu'ils soient traités comme des éléments de bloc similaires à ceux des <div> ).
Pour utiliser <input type='date'> vous devez vérifier Modernizr.inputtypes.date dans votre propre script, et si c'est faux, activez un autre plugin qui fournit un sélecteur de date. Vous avez le choix entre des milliers de plugins ; Modernizr maintient une liste non exhaustive de polyfills qui pourrait vous donner un point de départ. Vous pouvez également laisser tomber - tous les navigateurs se rabattent sur text lorsqu'ils sont confrontés à un type d'entrée qu'ils ne reconnaissent pas, de sorte que le pire qui puisse arriver est que l'utilisateur doive taper la date. (Vous pouvez lui donner un espace réservé ou utiliser quelque chose comme jQuery.maskedinput pour qu'il ne s'égare pas).
Tim S
Points
851
Vous avez demandé un exemple de Modernizr, le voici. Ce code utilise Modernizr pour détecter si le type d'entrée 'date' est supporté. Si ce n'est pas le cas, il retourne à 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 vous conviendra.
Ritabrata Gautam
Points
1151
<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>
Antti Haapala
Points
11542
Il s'agit en quelque sorte d'un article d'opinion, mais nous avons connu un grand succès avec WebShims . Il peut se décomposer proprement pour utiliser le datepicker de jQuery si le natif n'est pas disponible. Démonstration ici
- Réponses précédentes
- Plus de réponses
