J'ai la date suivante saisie:
<div class="form-group">
<label for="start_date">Start Date</label>
<input type="date" class="form-control" name="start_date" id="start_date" placeholder="mm/dd/yyyy">
</div>
Si je clique dessus en chrome, un sélecteur de date apparaît:
Cependant, si je clique dessus dans Firefox, le datepicker ne s'affiche pas up:
Est-ce que quelqu'un sait pourquoi cela se produit et/ou comment je peux le réparer dans Firefox afin qu'il soit cohérent?
Note - J'utilise bootstrap 3
Merci d'avance!!
Malheureusement, <input type="date"/>
n'est pas pris en charge par Firefox. Pour pouvoir utiliser le type de date dans tous les navigateurs, vous pouvez vérifier à l'aide de modernizer. Sinon, vous pouvez utiliser javascript pour afficher le datepickerr.
<script>
$(function(){
if (!Modernizr.inputtypes.date) {
$('input[type=date]').datepicker({
dateFormat : 'yy-mm-dd'
}
);
}
});
</script>
La prise en charge par le navigateur de telles fonctionnalités varie considérablement. Actuellement, Firefox et plusieurs autres navigateurs ne supportent pas l'utilisation des éléments <input type='date' />
tels que mentionnés ici et visibles dans le tableau ci-dessous:
Envisagez une alternative basée sur Javascript
Ce que vous pourriez envisager est d'utiliser un plugin basé sur Javascript, tel que DatePicker de jQueryUI pour cibler tous les éléments de ce type et le laisser prendre en charge de manière plus conviviale entre navigateurs:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function(){
// Find any date inputs and override their functionality
$('input[type="date"]').datepicker();
});
</script>
En outre, vous pouvez également envisager de rechercher un plug-in spécifique à Bootstrap, tel que bootstrap-datepicker , qui pourrait vous donner une apparence et une convivialité plus cohérentes.
Il suffit de mettre à jour FireFox à la dernière (v57), ce problème douloureux est parti pour toujours :-)
VoirPuis-je utiliser
Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
Preuve:
La raison fondamentale pour laquelle le format ne fonctionne pas de la même manière sur tous les navigateurs est due à la mise en œuvre différente du constructeur javascript Date () sur différents navigateurs:
alert (new Date ('30/12/2017')) ->
Firefox:
"Date invalide"
(cela peut être correct selon la définition).
C'EST À DIRE:
"Mer 12 juin 2019 ..."
(maintenant c'est faux!)
.. cela vient de C/C++ interne: la conversion est en 30 à 2 ans (24 mois) + 6 mois -> juin (déc + 6 mois) 2019 (2017 + 2 ans).
En gros, cela fonctionne mal sur TOUS les navigateurs!
Vous pouvez modifier (ou remplacer la fonction de date) "jquery.validate.js":
Voici le correctif. Cela fonctionne pour un de mes clients:
Vous remarquerez également que pour IE et ainsi de suite, il effectue davantage de contrôles en n'autorisant pas plusieurs dates erronées.
// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function (value, element) {
// test // alert (new Date('30/12/2017')) // original - bad // return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString()); // fix var oInst = $.datepicker._getInst(element) var sDateFormat = $.datepicker._get(oInst, "dateFormat") var oSettings = $.datepicker._getFormatConfig(oInst) var dtDate = null try { dtDate = $.datepicker.parseDate(sDateFormat, value, oSettings) } catch (ex) { } return this.optional(element) || dtDate != null
</ pre>}, </ code>
Cordialement, Ron Lentjes, LC CLS