type - Tipo de entrada de fecha HTML5 Interferir con jQuery Datepicker

input type date value today

Question

Estoy utilizando el selector de fechas de jQuery UI para las selecciones de fechas en mi sitio. Uno de mis usuarios acaba de actualizar a la versión más nueva de Chrome, que tiene incorporado un selector de fecha nativo para HTML5. El gran problema de las dos interfaces de usuario se superponen. El otro problema es que cuando el usuario envía una fecha, la fecha en la base de datos vuelve a "0000-00-00" y produce datos erróneos.

Si elimino jQuery datepicker, la mayoría de los usuarios que no utilicen los navegadores más recientes no tendrán un selector de fecha emergente. Y, aquellos que tienen el navegador más nuevo tendrán dos calendarios superpuestos que rompen la aplicación. Mi pregunta es ¿cómo deshabilito los navegadores más nuevos para que no muestren la función de fecha incorporada y continúe usando el Selector de fechas jQuery?

Answer 1

A veces no puedes modificar los tipos de formulario. Por ejemplo, estoy usando FormType del paquete de Symfony2.

Tuve este problema usando Genemu jQuery Datepicker, y resolví este problema agregando un botón de imagen de calendario y un poco de código CSS.

Puedes ver el resultado final en este enlace.

Aquí puede leer la documentación para agregar un ícono de imagen: jQuery UI Datepicker

Luego, simplemente agregué un css como este (tal vez las reglas de estilo sean diferentes para ti):

form input[type=date] + img {
    position: relative;
    left: -25px;
}

Answer 2

Agregue el atributo novalidate a su formulario para eliminar la validación incorporada del navegador.

<form action="login.htm" novalidate>

Vea este link para más información.

Answer 3

Cambie de usar la input[type=date] a la input[type=text] o use Modernizr para detectar el soporte para el selector de input[type=date] nativo. He escrito un post sobre las implicaciones de ambas opciones aquí: http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/ .

Answer 4

Use Modernizr o una biblioteca similar para detectar si el navegador admite el input type=date , y luego cargue el selector de input type=date jQuery UI si no lo hace.

if (!Modernizr.inputtypes.date) {
    $(''input[type=date]'').datepicker();
}