metadatos ejemplos definicion body attribute html twitter-bootstrap firefox datepicker

html - ejemplos - La entrada de fecha no funciona en Firefox



title html attribute (5)

Tengo la siguiente entrada de fecha:

<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 hago clic en Chrome, aparece un selector de fecha:

Sin embargo, si hago clic en Firefox, el marcador de fecha no aparece arriba:

¿Alguien sabe por qué está pasando esto y / o cómo puedo solucionarlo en Firefox para que sea consistente?

Nota: estoy usando bootstrap 3

¡¡Gracias por adelantado!!


El soporte del navegador para funciones como esta varía mucho. Actualmente, Firefox y muchos otros navegadores no admiten el uso de los elementos <input type=''date'' /> como se menciona aquí y se ven en el cuadro siguiente:

Considere una alternativa basada en Javascript

Lo que podría considerar hacer es usar un complemento basado en Javascript como el DatePicker de jQueryUI para apuntar a cualquier elemento de ese tipo y dejar que se haga cargo de una manera más amigable entre varios navegadores:

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

Además, también puede considerar buscar en un complemento específico de Bootstrap como bootstrap-datepicker , que podría darle una apariencia más consistente.


Lamentablemente, <input type="date"/> no es compatible con Firefox. Para poder usar el tipo de fecha en todos los navegadores, puede verificar usando modernizador y si no es compatible, puede recurrir a javascript para mostrar el selector de fecha.

<script> $(function(){ if (!Modernizr.inputtypes.date) { $(''input[type=date]'').datepicker({ dateFormat : ''yy-mm-dd'' } ); } }); </script>