bootstrap-datepicker_cazaresluisEn uno de mis mas recientes proyectos Panel para control de manifiesto de vuelos decidí utilizar las versiones mas recientes de Twitter Bootstrap y jQuery tomando en cuenta que con estas jQuery UI no es muy estable y presenta errores sobre todo con las ventanas modales.

Lo primero que tuve que hacer fue buscar el equivalente de DatePicker encontrando bootstrap-datepicker que por supuesto esta muy completo pero no se muestra correctamente en una ventana modal y que no se resuelve con tan solo modificar la propiedad z-index la cual no se encuentra en el css del complemento.

Si agregamos la propiedad z-index:

Por alguna razón esta modificación no funciona por lo cual me puse a buscar algún hack o solución en la web y encontré una solución e implementé algunas modificaciones ya que de entrada no funcionaba. Básicamente lo que hice fue detectar cuando se muestra bootstrap-datepicker y en ese momento tomar el valor del z-index de este y de la ventana modal y re asignar el valor de esta mas la unidad para al contenedor del calendario, todo esto con jQuery.

Paso 1.- Definir Bootstrap Datepicker

Paso 2.- Agregar el evento on.show()

Paso 3.- Re asignar z-index a la clase .datepicker

En conclusión modificar el código es bastante sencillo y no necesariamente tenemos que afectar el archivo css original, para esto existe jQuery que es bastante poderoso.

¿NECESITAS APOYO PARA TUS DESARROLLOS WEB?

Desarrollo aplicaciones web a la medida, sistemas integrales de registro y reservación de hospedaje, front y back end, formularios de contacto todo con twig, php, mysql, jquery.

Contáctame

¿Te ha agradado este artículo?

Te invito a compartirlo en tus redes sociales o en su defecto a registrarte en mi newsletter en donde recibirás información de cada nuevo post o tutorial que publique.