[Javascript] Instalar y usar el plugin Pickadate.js

Pickadate es un plugin de javascript selector de fechas es decir, que nos permite seleccionar fecha, es un plugin mobile-friendly, responsive y ligero.

El plugin pickadate lo he usado en algunos proyecto y cabe decir que es un plugin excelente, ademas de que se ve muy bien y se adapta a cualquier tema de diseño.

El plugin tiene diferentes parámetros javascript para personalizar el comportamiento de acuerdo a nuestras necesidades.

Descargar e instalar el plugin pickadate

Para descargar el plugin pickadate.js vamos a i a su pagina principal: https://amsul.ca/pickadate.js/ y vamos descargar el paquete que trae 2 plugins, pickadate.js y pickatime.js pero de pickatime.js hablaremos en otro articulo.

Vamos a descargar un paquete .zip, el cual vamos a descomprimir y obtener los archivos del plugin, es decir los archivos css y js necesarios.

Cambien es necesario que descarguemos jQuery o copiarlo de algún otro proyecto donde lo tengamos.

Ahora para instalar el plugin vamos a mover la carpeta que resulte de descomprimir el .zip y la colocaremos en un lugar seguro, también vamos a crear un archivo HTML donde vamos a incluir los archivos de la siguiente manera.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="pickadate.js-3.6.2/lib/picker.js"></script>
<script type="text/javascript" src="pickadate.js-3.6.2/lib/picker.date.js"></script>
<link rel="stylesheet" type="text/css" href="pickadate.js-3.6.2/lib/themes/classic.css">
<link rel="stylesheet" type="text/css" href="pickadate.js-3.6.2/lib/themes/classic.date.css">

Así incluimos las librerías necesarias, dentro de la etiqueta head.

Ahora vamos a usar el plugin, es tan fácil como crear un input de texto y luego usar la función “pickadate” desde javascript.

<input type="text" id="picker" name="date">

<script type="text/javascript">
	$("#picker").pickadate();
</script>

Esta es la forma mas fácil y sencilla de ejecutar el plugin.

El resultado es el siguiente.

Mas parametros y configuraciones

Como ya les había comentado el plugin cuenta con un montón de parámetros para ayudarnos a personalizarlo de acuerdo a nuestras necesidades.

Parámetro format

El parámetro format nos permite personalizar el formato de salida, una vez que seleccionamos la fecha y después se haga submit.

	$("#picker").pickadate({
		format: 'yyyy-mm-dd',
	});

Paramentros de traduccion

Si queremos cambiar los textos del plugin, por default estan en ingles, podemos cambiar los meses del año, los días de la semana y los botones del plugin. Los textos que están dentro de comillas se pueden cambiar o traducir.

	$("#picker").pickadate({
		// Strings and translations
		monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
		monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
		weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
		showMonthsShort: undefined,
		showWeekdaysFull: undefined,

		// Buttons
		today: 'Today',
		clear: 'Clear',
		close: 'Close',

		// Accessibility labels
		labelMonthNext: 'Next month',
		labelMonthPrev: 'Previous month',
		labelMonthSelect: 'Select a month',
		labelYearSelect: 'Select a year'
	});

Eventos

El plugin tambien cuenta con diferentes eventos que se disparan y se pueden agregar funciones para que se ejecuten en los determinados momentos que se ejevutan los eventos.

• onStart: Cuando se inicia el plugin
• onRender: Cuando se renderiza el plugin
• onOpen: Cuando se Abre el plugin
• onClose: Cuando se cierra el plugin
• onSet: Cuando se selecciona la fecha
• onStop: Cuando se detiene el plugin

	$("#picker").pickadate({
		onStart: function(){ alert("onStart"); },
		onRender: function(){ alert("onRender"); },
		onOpen: function(){ alert("onOpen"); },
		onClose: function(){ alert("onClose"); },
		onSet: function(){ alert("onSet"); },
		onStop: function(){ alert("onStop"); }
	});

Hay otros parámetros mas, pero estos que les explico son los mas importantes a mi parecer, pueden ver mas información en la pagina oficial del plugin.