Pikaday – MinDate – Asignar fecha mínima

Publicada el por

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. veamos como asignar a Pikaday una fecha mínima.

Pikaday es una librería Javascript que te permite trabajar con calendarios en tu formulario. No es la primera vez que creo artículo sobre esta librería: Pikaday en formato de fechas en español.

Para empezar a ver cómo asignar una fecha mínima al calendario donde el usuario debe escoger una fecha, 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.

Espero que os haya sido de utilidad este tutorial de cómo asignar una fecha mínima de Pikaday.

Página oficial de pikaday.js

https://github.com/Pikaday/Pikaday

Página oficial de librería Moment.js

http://momentjs.com/