Datetime picker jQuery
Con este script jQuery podremos disponer de un selector de fecha (dia, mes y año) y de tiempo u hora (horas, minutos y segundos).
Para hacerlo funcionar necesitamos incluir en el <head> de nuestra página los scripts de la librería jQuery y el script timepicker.
Por ejemplo:
<script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery/js/jquery-ui-1.8.13.custom.min.js"></script> <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
Seguidamente también el <head> para incluir un datetime picker básico deberíamos tener algo como esto:
<script type="text/javascript">
$(function(){
$('#fecha').datetimepicker();
});
</script>
Despúes ya solo queda añadir en el <body> el input con id=»fecha» para que invoque al jQuery:
<input type="text" name="fecha" id="fecha" value="" />
Disponemos de un ejemplo en funcionamiento donde mostramos varias opciones:
- Selector básico de dia, mes, año, hora y minuto.
- Poder mostra la hora en am/pm.
- Selector de hora y minuto.
- Selector de dia, mes, año, hora, minuto y segundos.
- Selector de horas y minutos con valor por defecto.
- Selector mostrando varios meses.
- Entre otros.
Todo esto se puede ver mejor en un ejemplo en funcionamiento.
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
43 respuestas a “Datetime picker jQuery”
Deja una respuesta
109 artículos que te podrían interesar
Ver más sobre
Saludos
Muchas gracias por tu aporte, me sirvio bastante para lo que necesitaba hacer en mi codigo.
Saludos estoy usando esa libreria y necesito saber como logro hacer una consulta a la base de datos (mysql) en campo datetime desde el formulario de php entre rango de fechas y horas , coloco date pero solo me muestra la fecha y necesito fecha y hora por favor si me puede ayudar gracias.
Hola,
Para hacer una consulta a la base de datos o incluso insertar o modificar es necesario que te fijes bien en el formato de la fecha que envía este plugin y como se guarda en la base de datos. Tienes que convertirlo. Con la función date() de PHP es posible convertir las fechas al formate database.
Saludos
Hola! Necesito saber como guardar la fecha y hora seleccionada en una base de datos, y como hacer para que esa fecha y hora no se pueda seleccionar dos veces; me podrás ayudar? Muchas gracias!
Hola buenos días,
Para este tipo de ayudas que se salen de lo que hay en el blog debe enviarnos un ticket al centro de soporte y allí le indicaremos como podemos proceder:
https://www.jose-aguilar.com/soporte/
Saludos
hola jose, excelente plugin, pero no puedo encontrar en una de las paginas el problema…, el scroll de la hora, llega solo hasta 22, y en el input, si pongo manualmente 23, tampoco me deja.
tenes idea del motivo o por donde puedo buscar?
Hola buenos días, puede ser que no estés usando los mismos ficheros de la demostración? Si te fijas este problema no está presente en la demostración. Lo puedes revisar? Saludos
Hola! excelente aporte, pero tengo un problema al intentar hacerlo funcionar en cakephp. Me funciona todo bien excepto que cuando doy click en el campo de texto y aparece el calendario, la barra de desplazamiento para seleccionar la hora y minutos, me aparece muy muy pequeña, y en cuanto intento desplazarla un poco, pasa del 0 al 23 en el caso de las horas, o de 0 a 59 en el caso de los minutos, ¿por qué puede ser esto? Todo lo demás me funciona perfectamente. Muchas gracias
Hola, eso se lo tendrás que preguntar directamente a los programadores del plugin. Saludos
Hola como estan,
Tengo una cuestion, qu tengo que hacer para que mi proyecto me reconozca estas funciones de js, ya hice todos los pasos descritos
pero no me corre, estoy trabajando con codeigniter, se les agradece.
Hola debes revisar si aparece algún error javascript en la consola. Te recomiendo firebug -> http://www.jose-aguilar.com/blog/firebug/
Es necesario utilizar el navegador firefox para utilizar este debuger de código.
Saludos
hola buenas. Muy buen artículo… pero necesito ir un poco más allá.
Tengo una sección para crear un nuevo usuario, en el que tengo un input con un datetimepicker de jquery. Funciona todo correctamente, pero lo que quiero es que al abrir la pagina de crear cliente, en el input de la hora, me salga por defecto la del sistema.
Como puedo hacer? muchas gracias
Hola,
Has probabo poniendo en el value del input un
echo date('Y-m-d H:is');Saludos
Hola!
Tengo un campo HoraInicio y HoraFin, ademas de FechaInicio y FechaFin, como puedo validar que la HoraFin no sea menor a la HoraInicio de acuerdo a las fechas. Muchas gracias
Hola a todos.
He conseguido cambiar el texto a los meses, días, etc…, pero no consigo cambiar el texto de los botones ‘Now’ y ‘Done’, ¿alguien puede decirme cómo?
Muchas gracias!
Hola,
En el archivo jquery-ui-timepicker-addon.js prueba de buscar y reemplazar esto que aparece:
currentText: ‘Now’,
closeText: ‘Done’,
Saludos
Hola Jose.
Efectivamente era ahí, lo había hecho pero no funcionaba, ésta mañana cuando he vuelto a arrancar el proyecto ya funcionaba correctamente, supongo que no se había actualizado correctamente… Ya que escribo aprovecho para hacerte otra pregunta, estoy usando dos fechas (fecha de inicio y de fin), estoy intentando controlar que la de fin no sea nunca igual o anterior a la de inicio, he implementado ésta función, pero no funciona correctamente:
function comparaFechasHoras(){
var fechaIni= document.getElementById(«fecha_hora_ini»).value;
var fechaFin= document.getElementById(«fecha_hora_fin»).value;
fechaFin.
if(fechaIni >= fechaFin){
alert(«La fecha de inicio no puede ser posterior ni igual a la de fin»);
return false;
}
}
¿Sabes cómo puedo comparar dos datetimepicker?
Muchas gracias y un saludo.
Perdón, el código de mi función es éste (el anterior tenía un error):
function comparaFechasHoras(){
var fechaIni= document.getElementById(«fecha_hora_ini»).value;
var fechaFin= document.getElementById(«fecha_hora_fin»).value;
if(fechaIni >= fechaFin){
alert(«La fecha de inicio no puede ser posterior ni igual a la de fin»);
return false;
}
}
Hola, gracias, funciona perfecto mi duda es porque el formato se ve como graaaande osea la imagen en la pantalla se ve grandísima… pero funciona bien.
gracias por la ayuda
Amigos les anexo las librerias para que las descarguen. Saludos a todos muy buen aporte 🙂 me faltaba un picker con la hora Grax Jose
1.—https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
2.—https://code.google.com/p/my-script-hosting/downloads/detail?name=jquery-ui-timepicker-addon.js&can=2&q=
3.—https://code.google.com/p/customizeyourweb/source/browse/trunk/src/chrome/content/jquery/jquery-ui-1.8.13.custom.js?r=103
Buenas tardes José, gracias por tu aporte. Quisiera saber, ya que me fue de ayuda tu control, como haces para recuperar el valor desde el code behind ya que el control no funciona cuando le ponés runat=»server»?
Desde ya muchas gracias!
Hola, muy bueno el tutorial, tengo una duda: como puedo formatear la fecha y la hora a yy-mm-dd hh:mm:ss en mi BD lo tengo de esa forma y usando el formato por defecto q trae jquery, me sale todo a 00-00-00 00:00:00, muchas gracias por la ayuda! 🙂
El datetimepicker tiene la opción de cambiar el formato a la fecha como por ejemplo:
dateFormat: ‘dd-mm-yyyy’,
Buenas, como podría hacer para poner un icono en forma de calendario para que cuando se pulsase apareciera esto? Gracias
En los ejemplos de este tutorial tienes como hacerlo con botón:
http://www.jose-aguilar.com/blog/datepicker-jquery/
Espero que te sirva,
Saludos
Buenas tardes, excelente tu aporte lo estoy aplicando pero tengo una duda, en la sección minDate/maxDate del ejemplo14 envío como parámetros minDate: new Date(2010, 11, 20, 8, 30),
maxDate: new Date(2010, 11, 31, 17, 30)
Mi pregunta es qué significa los dos últimos valores de cada sentencia minDate: new Date(… 8, 30),
maxDate: new Date(… 17, 30)
Muchas gracias.!
Son horas y minutos de la fecha
Hola, tan solo quiero decir que no esta bien postear contenido sin hacer referencia al author del plugin ni la pagina fuente.
Para que este plugin funcione necesitan:
– jQuery: http://jquery.com/
– jQuery UI: http://jqueryui.com/ (si hacen custom download deben asegurarse que el widget datepicker y slider esten seleccionados)
– Time picker addon: http://trentrichardson.com/examples/timepicker/
Importan
Toda la informacion necesaria para inicializar el plugin esta en http://trentrichardson.com/examples/timepicker/
hola a todos, soy emprendedor y de nivel básico en diseño Web y estoy desarrollando un pequeño proyecto, ando buscando quien me de una buena ayuda de como hacer un input que pueda conveertirlo en un formato de hora:minuto:segundo la opción de 12 o 24 i pueden escribamnme a my email andytorrealba@gmail.com me encontré este sitio de mera casualidad. garcias
Alejandro no se si te sirva todavia pero te comento como lo uso
$(\’#Filter_start\’).datetimepicker({
controlType: \’select\’,
dateFormat: \’dd/mm/yy\’,
timeFormat: \’hh:mm:ss\’,
currentText: \’Ahora\’,
closeText: \’Listo\’,
timeText: \’\’,
dayNamesMin: [\’Do\’, \’Lu\’, \’Ma\’, \’Mi\’, \’Ju\’, \’Vi\’, \’Sa\’],
monthNames: [\’Enero\’, \’Febrero\’, \’Marzo\’, \’Abril\’, \’Mayo\’,\’Junio\’, \’Julio\’, \’Agosto\’, \’Septiembre\’,\’Octubre\’, \’Noviembre\’, \’Diciembre\’],
monthNamesShort: [\’Ene\’, \’Feb\’, \’Mar\’, \’Abr\’,\’May\’, \’Jun\’, \’Jul\’, \’Ago\’,\’Sep\’, \’Oct\’, \’Nov\’, \’Dic\’]
});
Esto basado en el codigo que tu amablement posteaste … saludos a todos … buen foro
Alejandro no se si te sirva todavia pero te comento como lo uso
$(‘#Filter_start’).datetimepicker({
controlType: ‘select’,
dateFormat: ‘dd/mm/yy’,
timeFormat: ‘hh:mm:ss’,
currentText: ‘Ahora’,
closeText: ‘Listo’,
timeText: »,
dayNamesMin: [‘Do’, ‘Lu’, ‘Ma’, ‘Mi’, ‘Ju’, ‘Vi’, ‘Sa’],
monthNames: [‘Enero’, ‘Febrero’, ‘Marzo’, ‘Abril’, ‘Mayo’,’Junio’, ‘Julio’, ‘Agosto’, ‘Septiembre’,’Octubre’, ‘Noviembre’, ‘Diciembre’],
monthNamesShort: [‘Ene’, ‘Feb’, ‘Mar’, ‘Abr’,’May’, ‘Jun’, ‘Jul’, ‘Ago’,’Sep’, ‘Oct’, ‘Nov’, ‘Dic’]
});
Esto basado en el codigo que tu amablement posteaste … saludos a todos … buen foro
Hmm solo revisen el codigo detras de la página -_-. Buen Trabajo.
de donde bajo el jquery-ui-timepicker-addon.js?????????????????????????????????
Hola, muy buen aporte, sera que me puede indicar como le cambio el texto a los botones? ya le agregue formato a la fecha para que me permita seleccionar año y mes de un select:
$(‘#inventario_productos_prod_inicio_descuento’).datetimepicker({dateFormat: ‘yy-mm-dd’,changeMonth: true,changeYear: true,dayNamesMin: [‘Do’, ‘Lu’, ‘Ma’, ‘Mi’, ‘Ju’, ‘Vi’, ‘Sa’],monthNames: [‘Enero’, ‘Febrero’, ‘Marzo’, ‘Abril’, ‘Mayo’,’Junio’, ‘Julio’, ‘Agosto’, ‘Septiembre’,’Octubre’, ‘Noviembre’, ‘Diciembre’],monthNamesShort: [‘Ene’, ‘Feb’, ‘Mar’, ‘Abr’,’May’, ‘Jun’, ‘Jul’, ‘Ago’,’Sep’, ‘Oct’, ‘Nov’, ‘Dic’]});
pero me hace falta como cambiarle el texto a los botones.
gracias…
Intente revisar el archivo js
Un saludo,
Esto no funciona, guarde la pagina del ejemplo, copie los scripts y aun asi no funciona.. sera que algun script invoca a otros internamente?
Gracias.
Hola Hugo,
Me gustaría saber la url donde lo has puesto para indicarte que puede faltarte.
En principio, solo es necesario incluir los scripts jquery + css y realizar la llamada a los divs correspondientes.
Saludos.
Los scripts para disponer del date time picker lo puedes descargar de aquí
http://plugins.jquery.com/node/2795/release
Y después disponer de los scripts generales de jquery.
Otra opción es ver el ejemplo y observar el código fuente.
Saludos
respuesta
…correcta.
Es muy buena aportación, en donde lo puedo descargar????
Saludos
Hola Cristina,
Si necesitas un selector de fecha (dia, mes, año) puedes visitar los siguientes artículos:
http://www.jose-aguilar.com/blog/?s=datepicker
Espero te sirva,
Saludos
Hola:
He estado probando el calendario y funciona muy bien. Te queria hacer una pregunta, sabes si se pueden des-habilitar horas por dia?
Gracias.