Programando

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...
Deshabilitar / Desactivar Intro en un formulario Vaya manía que tienen algunos al pulsar 'Enter / Intro' cada vez que añaden contenido a un campo de un formulario. Quizás que desvíen su mirada hacia ...
Habilitar WebGL en navegador FireFox Hace dos días os mostré cómo habilitar la aceleración gráfica en vuestro navegador Chrome (en mi caso lo necesitaba para probar programas creados con ...
Pikaday en formato español Alguno de vosotros ya conoceréis librerías javascript que permiten escoger una fecha de un formulario mediante un calendario. De los mas famosos es Da...