jQuery Simple Datetimepicker

jQuery Simple Dtpicker es otro plugin jQuery que permite al usuario seleccionar una fecha y hora en un campo de texto.

Es un plugin muy sencillo y limpio. En más de un proyecto me ha sacado de un apuro y es muy sencillo de instalar.

Lo primero que debes hacer es descargar los archivos del plugin. Descargar archivos de GitHub

En la cabecara de tu página debes incluir la librería jQuery (en el caso de que no la tengas), el plugin y los estilos css que vienen en la descarga:

Source code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.simple-dtpicker.js"></script>
<link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" />

También en la cabecera debes incluir la llamada al plugin haciendo referencia al input con id=»date_picker» que será nuestro campo para el selector de fecha y hora:

Source code

<script type="text/javascript">
$(function(){
    $('#date_picker').dtpicker();
});
</script>

Ahora tan solo te queda que añadas el campo de texto (input) en tu formalario donde quieres que el usuario pueda escoger una fecha. En el caso del ejemplo en funcionamiento:

Source code

<input id="date_picker" name="date" value="" type="text">
<script type="text/javascript">
$(function(){
    $('*[name=date]').appendDtpicker({"locale": "es"});
});
</script>

En el código anterior estamos añadiendo el campo de texto (que representa la fecha y hora) y debajo hacemos una llamada a una función del plugin para darle las características que incorpora dicho plugin.

Fíjate que lo que estamos haciendo es indicar que para todos los campos de texto con nombre «date» le vamos a añadir las propiedades o características del plugin con el objetivo de que al hacer click se habra el selector de fecha y hora.

También es importante saber que es posible pasarle algunos parámetros. En nuestro ejemplo, le estamos pasando como parámetro el «locale» con valor «es» para que el contenido del datetimepicker aparezca en idioma español.

Ver ejemplo en funcionamiento