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?
Rápli András
Points
1265
Il suffit d'utiliser <script src="modernizr.js"></script> dans le <head> et le script ajoutera des classes qui vous aideront à séparer les deux cas : s'il est pris en charge par le navigateur actuel, ou s'il ne l'est pas.
De plus, suivez les liens affichés dans ce fil de discussion. Cela vous aidera : Prise en charge de la date, de la couleur et de l'intervalle des types d'entrée HTML5 dans Firefox et Internet Explorer
Kelvin
Points
21
Kashif Latif
Points
440
La meilleure solution que j'ai trouvée est celle qui fonctionne sur les navigateurs suivants
- Google Chrome
- Firefox
- Microsoft Edge
-
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>
tschundeee
Points
9241
Two-script-Include-Solution (2019) :
Il suffit d'inclure Better-Dom y Better-Dateinput-Polyfill dans votre section scripts.
Voici une démonstration :
http://chemerisuk.github.io/better-dateinput-polyfill/
Amol Shirude
Points
1
<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>
