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:

<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:

<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:

<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.

jquery-simple-datepicker

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

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*