Tipo de entrada de fecha HTML5 Interferir con jQuery Datepicker

Question

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

Si elimino el jQuery datepicker, la mayoría de los usuarios que no usan los últimos navegadores no tendrán un selector de fecha emergente. Y aquellos que tengan el navegador más nuevo tendrán dos calendarios superpuestos que romperán la aplicación. Mi pregunta es ¿cómo desactivo los navegadores más nuevos para que no muestren la función de fecha incorporada y continúen usando el jQuery Datepicker?

Answer 1

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

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

Answer 2

interruptor Ya sea desde el uso de input[type=date] a input[type=text] o utilizar Modernizr para detectar soporte para el planificador de evento nativo. He escrito una publicación 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 3

A veces no puede modificar los tipos de formulario. Por ejemplo, estoy usando FormType de Symfony2 Bundle.

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

You can see final result in this link

Aquí puede leer la documentación para añadir icono de la imagen: jQuery UI Datepicker

Entonces, sencilla añadió un css como esto (tal vez las reglas de estilo serán diferentes para usted):

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

Answer 4

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

<form action="login.htm" novalidate> 

Consulte este link para obtener más información.