BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Selecciona fecha y hora con DateTime picker para jQuery

25/MAR/2014 57.669 visitas Ver comentarios
Selecciona fecha y hora con DateTime picker para jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Cuántas veces nos encontramos en nuestros proyectos con la necesidad de que el usuario nos indique la fecha y hora en la que realizó o realizará determinada acción... Habitualmente caemos en las 3 opciones que disponemos que son, o bien mostrar distintos selects para seleccionar día, mes y año y un campo de texto extra para la hora; hacer todo por campos de texto o poner un selector de fecha y selects o inputs de texto para la hora.

Pues bien, si bien no es nuevo, esta opción que traigo es mucho más útil que todo lo anterior para seleccionar una sola vez la fecha y la hora y asegurarnos, al mismo tiempo, que el usuario lo hará de la forma correcta en la que necesitamos esos valores.

Si bien el DatePicker de jQueryUI es el más extendido en el mundo del desarrollo web, éste no trae la opción de seleccionar las horas... pero los tiempos de tener que buscarnos la vida para unir ambos sistemas se acabaron... ha llegado DateTimePicker para hacernos la vida un poquito más fácil.

Es muy configurable, tanto en horas como en fechas, pudiendo seleccionarse la fecha en distintos idiomas, no invade tus formularios ya que puede activarse al hacer foco sobre el input designado y su apariencia es muy bonita y puede personalizarse fácilmente.

Incluso puede agregarse un trigger o botón adicional que lance el selector sin activarlo al hacer foco en el campo.

Es muy pero muy configurable, tal como fechas mínimas, máximas, idiomas, bloquear determinadas horas, usarlo sólo para fechas, sólo para horas o ambos, y muchísimas opciones más que están todas listadas en su web.

Código 1 - HTML
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
Código 2 - HTML
<input id="datetimepicker" type="text" >
Código 3 - JAVASCRIPT
$('#datetimepicker').datetimepicker();

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018