Mostrar bootstrap datepicker en una ventana modal

/, Diseño Web, HTML, jQuery/Mostrar bootstrap datepicker en una ventana modal

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.
By | 2018-03-25T22:33:33+00:00 diciembre 2nd, 2014|Categories: Desarrollo Web, Diseño Web, HTML, jQuery|Tags: , , , |17 Comments
Desarrollador web front y back end, php, mysql, css3, html5, twitter bootstrap, jquery . . . twitero, bloguero, consultor de IT y padre de dos hermosos bodoques. Visita mi Perfil en Google +

17 Comments

  1. Bootstrap - Librerías y Complementos 13 diciembre, 2014 at 10:27 PM

    […] Básicamente es un widget de calendario para bootstrap bastante sencillo y fácil de implementar y como todos cuenta con algunas cuestiones que hay que resolver como por ejemplo Mostrar el Widget de forma correcta en una Ventana Modal. […]

  2. Michel Lozada 9 octubre, 2015 at 10:11 AM

    Gracias mi hermano, me sacaste de un buen apuro. Saludos desde Cuba.

  3. Rodolfo BSJ 23 noviembre, 2015 at 12:56 PM

    Buena solución, por ahí la he implementado y ha funcionado bien. De casualidad no sabes por que no se me muestran las iconos (flechas) para retroceder o avanzar en los meses/años

  4. Rodolfo BSJ 23 noviembre, 2015 at 1:10 PM

    Bien ya quedó lo de los iconos, hay que modificar el headTemplate del archivo bootstrap-datepicker.js, especificamente la clase que muestra los iconos. Saludos Master.

  5. Rodolfo BSJ 23 noviembre, 2015 at 5:55 PM

    “Pregunta”. Porqué al hacer una consulta y llenar una input type=”text” con un fecha, al hacer click en cualquier parte de mi página este vuelve a poner la ultima fecha que seleccione ó si no, pone la fecha actual; cuando aun no he puesto el click sobre la caja de texto para modificar ese campo.

    • Luis Fernando Cázares Bulbarela 2 diciembre, 2015 at 11:40 AM

      Hola Rodolfo esas son funcionalidades por default de el plugin, creo trae métodos o funciones para controlar su comportamiento, checa en la documentación oficial.

      Saludos

  6. Yamilka 2 marzo, 2016 at 7:21 AM

    Hola muy buen post y me ha servido de mucho, saludos desde Cuba, pero llevo poco tiempo usando boostrap y quisiera saber como pudiera hacer q me saliera un alert cuando una fecha es 3 dias antes que la fecha de la pc. Gracias y disculpe mi falta de conocimiento estoy en el proceso de aprender.

    • Luis Fernando Cázares Bulbarela 7 marzo, 2016 at 10:58 PM

      Hola Yamilka muchas gracias por tu consulta, quiero entender que lo que deseas es que al listar un conjunto de registros en alguna de las columnas haga una validación de los días y muestre en un color distinto una etiqueta.
      El proceso es sencillopor un lado en php debes realizar el calculo y determinar si se cumple la condición o no, y guardar falso o verdadero en una variable, esta la pasas a tu plantilla y haces una comparación, si es verdadero pones un tag de color rojo de lo contrario en verde.

      Saludos

      • Rodrigo 19 julio, 2016 at 11:27 AM

        Hola me puedes ayudar con el codigo completo de este tutorial?

        • Luis Fernando Cázares Bulbarela 1 agosto, 2016 at 2:43 PM

          Hola buenas tardes, el código no lo tengo, pero te puedo comentar que en las nuevas versiones de esta ya no es necesario crear esta funcionalidad, solo lo hace.

          Saludos

  7. Curro 19 abril, 2016 at 12:38 PM

    Muchas gracias por tu código. Funcionó de maravilla a la primera, cosa que no siempre se produce y es de agradecer.

  8. Ricardo 24 noviembre, 2016 at 4:05 PM

    Podrias indicarme la version del Jquery, Boostrap y Bootstrap Datepicker ? No he logrado que me funcione. Utilizo Jquery 1.11.3, Bootstrap Datepicker 1.6.1 y Bootstrap 3.3.6

    • Luis Fernando Cázares Bulbarela 1 febrero, 2017 at 10:43 PM

      Hola buenas noches una disculpa por contestar hasta ahora, que te cuento que con las versiones mas recientes de estos recursos ya no es necesario hacer esa modificación.

      Saludos

  9. Alfonso 25 noviembre, 2016 at 2:54 PM

    Hola Luis,

    No consigo hacerlo funcionar en mi modal de bootstrap. Desesperado ya,

    • Luis Fernando Cázares Bulbarela 1 febrero, 2017 at 10:44 PM

      Hola Alfonso mil disculpas por contestar hasta ahora, te comento que con las nuevas versiones de estos recursos ya no es necesario hacerlo…

      Saludos

Comments are closed.

Desarrollo Web

Silex - Sistema de Registro