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

💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.

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.

¿Necesitas un software de ventas listo para producción?

Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.

Ver Inventio Max – Sistema de Inventario y Ventas Profesional →