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

JavaScript – Sumar días o meses a una fecha Veamos un ejemplo de cómo sumar a la fecha actual, días o meses en Javascript. Uno de los temas más engorrosos debido a los diferentes formatos de fec...
EXT JS – Framework JavaScript Empezamos con uno de los FrameWorks de JavaScript que todavía no he probado, EXT JS. Tiene muy buena pinta, aunque el tema de licencias puede ser un f...
Ejemplo AJAX envío formulario con jQuery Pequeño ejemplo de utilización de AJAX para el envío de un formulario Página del formulario (pw-pac1.html) En el header function validarUsuar...
Javascript: convertir string en integer o float Unas de las funciones que mas tarde o mas temprano debemos utilizar es la que nos convierte una variable del tipo 'string' a una variable del tipo 'in...

Deja un comentario

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

*