web-dev-qa-db-fra.com

La date d'entrée ne fonctionne pas dans Firefox

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:

 datepicker in chrome

Cependant, si je clique dessus dans Firefox, le datepicker ne s'affiche pas  datepicker in firefox 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!!

htmltwitter-bootstrapfirefoxdatepicker
9
Trung Tran

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>
15
riteshmeher

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:

 enter image description here

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.

7
Rion Williams

Il suffit de mettre à jour FireFox à la dernière (v57), ce problème douloureux est parti pour toujours :-)

VoirPuis-je utiliser enter image description here

Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Preuve:

 enter image description here

2
mumair

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
0
Ron Lentjes