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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE HTML> <html> <head> <title>Desarrollo Hidrocálido</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"> <style type="text/css"> body {padding-top:20px;} </style> </head> <body> <!--INICIO --> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Datetimepicker Bootstrap</legend> <div class='input-group date' id='divMiCalendario'> <input type='text' id="txtFecha" class="form-control" readonly/> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span> </div> </fieldset> </form> </div> </div> </div> </div> <!--FIN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/moment.min.js"></script> <script src="js/bootstrap-datetimepicker.min.js"></script> <script src="js/bootstrap-datetimepicker.es.js"></script> <script type="text/javascript"> $('#divMiCalendario').datetimepicker({ format: 'YYYY-MM-DD HH:mm' }); $('#divMiCalendario').data("DateTimePicker").show(); </script> </body> </html> |
|
1 2 3 |
$('#divMiCalendario').datetimepicker({ format: 'YYYY-MM-DD HH:mm' }); |
Al final usamos el objeto datetimepicker para manipular el formato de nuestra fecha, ustedes pueden jugar sobre como quieren que vaya el formato.
|
1 |
$('#divMiCalendario').data("DateTimePicker").show(); |
y con el metodo .show() le decimos que lo muestre al momento de cargar la pagina( opcional )
Conclusión:
Pudimos Observar que el plugin requiere de lo siguiente:
- jquery
- boostrap 3
- libreria moment para manipular el objeto date
- 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.
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!!
Wow Looks Nice I Will Test It Thanks.
Amalia.
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
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
Hola Gustavo, si no quieres que se muestre no le pongas el método show()
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
http://eonasdan.github.io/bootstrap-datetimepicker/ Resiva los ejemplos que salen ahí
Hola, amigo, muchas gracias por la ayuda.
No sabes si existe la forma de que se cierre cuando se selecciona la fecha.
Saludos.
Gracias por compartir , sabes como puedo activar el reloj para cambiar la hora
donde consigo todas las librerias
como puedo habilitar el reloj?
Hola,
Cómo haría para deshabilitar fechas que obtengo tras una consulta de mysql?
Muchas gracias
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?
Hola Jose Luis, puedes intentar en quitar este fragmento de código : $(‘#divMiCalendario’).data(“DateTimePicker”).show();
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?
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
Que tal Cesar, me parece que si se puede tiene una propiedad sería cuestión de darle una revisada en la documentación. Saludos
Como le hiciste para poner el mes y los días en español
Que tal , hay que copiar un archivo llamado es.js , saludos!
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
Como tienes el llamado
hola buenas tardes,
Excelente código,
pero una cosita solo tiene hasta el año 1970 como le aumento mas