JavaScript: limitare la selezione di una data in un campo di input date

In questo articolo vedremo come impostare dinamicamente un limite alla selezione di una data in un campo di input date con JavaScript.

L'input di tipo date possiede gli attributi min e max che servono ad impostare rispettivamente la data minima e massima entro cui effettuare la selezione. Questi attributi devono avere entrambi come valore una stringa in un formato data valido (ad esempio YYYY-mm-dd).

Possiamo quindi implementare la seguente soluzione:

'use strict';

const formatDate = date => {
    return date.toISOString().split('T')[0]; // YYYY-mm-dd
};

const setDateRange = (inputElement, startDate, endDate) => {
    inputElement.setAttribute('min', formatDate(startDate));
    inputElement.setAttribute('max', formatDate(endDate));
};

const inputDate = document.getElementById('date');

const now = new Date();
const year = now.getFullYear();
const nextMonth = now.getMonth() + 1;
const nextDay = now.getDate();

setDateRange(inputDate, now, new Date(year, nextMonth, nextDay));

In questo esempio abbiamo ristretto la selezione della data dal giorno corrente fino ad un mese nel futuro. La funzione formatDate() sfrutta il formato ISO per convertire un oggetto Date nel formato YYYY-mm-dd da usare negli attributi min e max del campo di tipo date.