Pikaday – MinDate – Asignar fecha mínima

Con la librería de javascript Pikaday, podemos utilizarla para crear nuestros campos de formulario con formato calendario. Puede interesarnos que al pulsar sobre el campo de calendario, ésto sólo te deje escoger a partir de una fecha determinada.

Para empezar, necesitaremos cargar las librerías de jquery, de pikaday y la de moment:

<head>
...
<link href="http://miweb.com/js/pikaday/pikaday.css" rel="stylesheet" type="text/css">
...
<script src="http://miweb.com/js/pikaday/moment.js"></script>
<script src="http://miweb.com/js/pikaday/pikaday.js"></script>
...
</head>

Ésta última es una librería que permite trabajar con fechas en javascript. Por otro lado tendremos el formulario con el campo que queremos que sea calendario:

<form action="enviar-formulario.php" method="post">
<input type="text" id="checkin" name="checkin" />
</form>

Y ahora toca poner el código en JavaScript que genera el calendario a este campo y donde asignaremos la fecha inicial a partir de la que podemos escoger fecha:

<script type="text/javascript">
$(document).ready(function(){
var checkinPicker = new Pikaday({
field: document.getElementById('checkin'),
format: 'YYYY-MM-DD',
numberOfMonths: 1,
firstDay: 1,
minDate: moment().toDate() // Fecha mínima es hoy
});
});
</script>

Es en el último parámetro minDate donde asignamos la fecha mínima que se puede escoger en el calendario. En este caso indicamos moment().toDate() que es la fecha de hoy.

Si queremos indicar una fecha concreta, que no sea hoy, entonces deberemos trabajar para crear la fecha y pasársela a Pikaday de la siguiente manera:

<script type="text/javascript">
$(document).ready(function(){

var firstday = new Date(2019, 4, 17);

var checkinPicker = new Pikaday({
field: document.getElementById('checkin'),
format: 'YYYY-MM-DD',
numberOfMonths: 1,
firstDay: 1,
minDate: moment(firstday).toDate() // Fecha mínima 17 de mayo de 2019
});
});
</script>

Primero creamos la variable firstday del tipo fecha, y luego se la pasamos a moment en el atributo minDate del objeto Pikaday.

Página oficial de pikaday.js

https://github.com/Pikaday/Pikaday

Página oficial de librería Moment.js

http://momentjs.com/

Artículos relacionados

Frameworks HTML5 Open Source para crear app/webs m... Listado de algunos Frameworks HTML5 Open Source por si os planteáis crear aplicaciones para móvil: Bootstrap Kendeo UI TopCoat Intel's App...
Socialite.js – Botones sociales en su web Una pequeña librería JavaScript que permite poner los botones sociales de Facebook, Twitter, Google y LinkedIn de forma fácil en cualquier web o blog....
jsPDF y Responinator Hemos añadido a recursos de programación dos nuevas herramientas: Por un lado jsPDF, un librería de JavaScript que permite crear documentos PDF desde...
Fundamentos de NodeJS Os dejo un vídeo para los que quieran iniciarse con NodeJS. Me remito a la descripción en WikiPedia que creo que es la mas clara: Node.js es un ent...

Deja un comentario

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

*