Change the MIN value of a DATE input relative to when the form is opened

This JavaScript code will automatically change the MIN value of a DATE input to the desired start DATE.

Checkout the Codepen DEMO.

In this example, we will change the MIN value of the DATE input to start three days from today’s date by using the addDays function.

Unselectable past dates will be greyed out, including today, tomorrow, and the day after relative to when the form is opened.

---

Today’s date:

Date input:

---

HTML Code:

<p><strong>Today's date:</strong> <span id="today"></span></p>
<p><strong>Date input:</strong> <input type="date" id="date-input"></p>

JavaScript Code:

// Grab today's date using JavaScript
var today = new Date();
// Format the date as Y-m-d
today = today.toJSON().slice(0, 10);
// Show today's date
document.getElementById("today").innerHTML = today;

// Function to add more days to a JS date
function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
}

document.addEventListener('DOMContentLoaded', function() {
  // Grab today's date
  var today = new Date();
  // Add 3 days and create a new date variable
  var newDate = addDays(today, 3);
  // Format the date as Y-m-d
  newDate = newDate.toJSON().slice(0, 10);
  // Attach the new MIN value to the desired DATE input
  var input = document.getElementById("date-input");
  input.setAttribute("min", newDate);
}, false);