Close

Ejemplo Datetimepicker en Bootstrap 3

Hoy les quiero mostrar un ejemplo claro de como usar el plugin datetimepicker que es bastante útil para
nuestros sistemas web, por ahora es el mejor que e usado puesto que es sencillo,buen diseño y sobre
todo es responsive design ya que esta basado en bootstrap, para ser específicos esta basado en la versión
3 de boostrap

la liga del plugin es la siguiente :

https://eonasdan.github.io/bootstrap-datetimepicker/

El plugin es de código abierto y podemos meternos a las fuentes que están alojadas en github.Dentro de la página ustedes podrán encontrar más información sobre como manejar las fechas,tiempo,posiciones, entre otras funcionalidades.La documentación se encuentra en ingles pero es bastante fácil de entender.
Lo que vamos a ver en el ejemplo es ver como usarlo de una forma básica y como traducirlo al idioma español.

Al final usamos el objeto datetimepicker para manipular el formato de nuestra fecha, ustedes pueden jugar sobre como quieren que vaya el formato.

y con el metodo .show() le decimos que lo muestre al momento de cargar la pagina( opcional )

PUEDEN VER EL EJEMPLO AQUI

VER CÓDIGO EN GITHUB

Conclusión: 

Pudimos Observar que el plugin requiere de lo siguiente:

  1. jquery
  2. boostrap 3
  3. libreria moment para manipular el objeto date
  4. datetimepicker.es.js que al fin de cuentas es un array con las traducciones

En base a estas librerías nosotros podemos obtener un calendario muy sofisticado para nuestros sistemas web.

 

21 thoughts on “Ejemplo Datetimepicker en Bootstrap 3

  1. Muy bueno el ejemplo, me ha servido de mucho!!
    Pero tengo un problema, hago un buscar entre fechas, y la primera de las fecha me funciona bien, en la segunda no me sale el calendario para seleccionar la fecha!! te ha pasado algo asi?? Como lo puedo resolver!! soy nuevo en todo esto!!

  2. Hola oskar te comento que debes de tener cuidado con los ids no debes de tener duplicidad de id’s en jquery, ha de ser lo que te pasa
    $(‘#divMiCalendario’).datetimepicker({
    format: ‘YYYY-MM-DD HH:mm’
    });
    hay que manipularlos con distintos ID’s

  3. Muy bueno, gracias.
    Una consulta, si quiero que no se muestre de entrada el calendario, como hago? No encuentro donde cambiar el atributo display.
    Como va a ir en una ventana modal necesito que se muestre después de abierta la ventana modal.
    Muchas gracias

  4. buenas tardes, por favor una ayuda: como hago para que me aparezca no mas HORAS, necesito almacenar solo por ejemplo 23:59:59 y que no me muestre nada de fechas. gracias

  5. Hola, amigo, muchas gracias por la ayuda.

    No sabes si existe la forma de que se cierre cuando se selecciona la fecha.

    Saludos.

  6. Hola! Ante todo, gracias por la explicación.

    Tengo una duda, estoy probando tu código y no me funciona el colapsado y descolapsado al clicar sobre el icono del reloj, ¿alguna posible explicación?

      1. Muchas gracias!!

        Otra preguntilla, tengo un problema, y es que cuando tengo una fecha con una hora en el input, si la borro, al perder el foco, esta se restablece

        ¿sabes por qué puede ser?

  7. Diego,hay alguna manera de que el datetimepicker le des la orientación hacia donde quieres que despliegue el pop up de las fechas(la fecha a seleccionar),es decir,hacia arriba,abajo derecha o izquierda

  8. Hola, esta todo ok pero encontre que se pega la pagina al cargar el archivo de moment.min.js , se traba e indica que el script tiene duracion prolongada

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.