How To Disable Date only using JavaScript
Updated on
...
18th December 2023
In this tutorial we are going to use only javascript to disable date in HTML date input, and we will also see the various example according to different situtations.
Determine the only javascript you are using. However, there are many datepicker libraries available, such as jQuery UI Datepicker, Bootstrap Datepicker, and Flatpicker. but in this tutorial, we are using vanilla JavaScript to achieve the goal.
We will see the below example in this tutorial:
- Example 01: Disabled all past date
- Example 02: Only enabled 3 months date from the current
- Example 03: Disabled All Sunday from Callander
- Example 04: Disabled all future date
Example 00: Disable past or future dates only using html attribute
if you do not want to use any JavaScript then you have min and max attributes in html data input.
with the help of these two attributes you can disable past or future dates or you can disable any specific date range. here I am using PHP to get the current date. you can also provide a static value in the same format.
<!-- disable past date -->
<label for="date">Select a event Date:</label>
<input type="date" name="event" min="<?php echo date('Y-m-d'); ?>">
<!-- disable future date -->
<label for="date">Select a DOB:</label>
<input type="date" name="dob" max="<?php echo date('Y-m-d'); ?>">
Example 01: Disabled all past date
<form>
<label for="datePicker">Select a date:</label>
<input type="date" id="event_date" name="date" required>
<input type="submit" value="Submit">
</form>
document.addEventListener("DOMContentLoaded", function () {
var today = new Date().toISOString().split("T")[0];
document.getElementById("event_date").setAttribute("min", today);
});
But if you have multiple date filed with the same class then you can go with the below approach
<form>
<label for="datePicker">Select a date:</label>
<input type="date" name="date[]" class="event_date" required>
<label for="datePicker">Select a date 2:</label>
<input type="date" name="date[]" class="event_date" required>
<input type="submit" value="Submit">
</form>
document.addEventListener("DOMContentLoaded", function() {
var today = new Date().toISOString().split("T")[0];
var endDateInputs = document.getElementsByClassName("event_date");
// Iterate through each element with class "end_date" and set the min attribute
for (var i = 0; i < endDateInputs.length; i++) {
endDateInputs[i].setAttribute("min", today);
}
});
Example 02: Only enabled 3 months date from the current
<form>
<label for="datePicker">Select a date:</label>
<input type="date" name="date[]" class="event_date" required>
<label for="datePicker">Select a date 2:</label>
<input type="date" name="date[]" class="event_date" required>
<input type="submit" value="Submit">
</form>
//only enabled 3 months date from current
document.addEventListener("DOMContentLoaded", function() {
var today = new Date();
var endDateInputs = document.getElementsByClassName("event_date");
// Calculate three months from today
var threeMonthsLater = new Date();
threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 3);
// Format today's date in YYYY-MM-DD for comparison with input date
var todayFormatted = today.toISOString().split("T")[0];
// Format three months later in YYYY-MM-DD for comparison with input date
var threeMonthsLaterFormatted = threeMonthsLater.toISOString().split("T")[0];
// Iterate through each element with class "end_date" and set the min and max attributes
for (var i = 0; i < endDateInputs.length; i++) {
endDateInputs[i].setAttribute("min", todayFormatted);
endDateInputs[i].setAttribute("max", threeMonthsLaterFormatted);
}
});
Example 03: Disabled All Sunday from Callander
<form>
<label for="datePicker">Select a date:</label>
<input type="date" name="date" class="event_date" required>
<input type="submit" value="Submit">
</form>
// disabled sunday
document.addEventListener("DOMContentLoaded", function() {
var endDateInput = document.querySelector(".event_date");
endDateInput.addEventListener("input", function() {
var selectedDate = new Date(endDateInput.value);
// Check if the selected date is a Sunday (day 0 in JavaScript's Date object)
if (selectedDate.getDay() === 0) {
alert("Sundays are disabled. Please select another date.");
endDateInput.value = ''; // Clear the input if Sunday is selected
}
});
});
Example 04: Disabled all future date
<form>
<label for="datePicker">Select a date:</label>
<input type="date" name="date" id="dob" required>
<input type="submit" value="Submit">
</form>
document.addEventListener("DOMContentLoaded", function() {
var today = new Date().toISOString().split("T")[0];
document.getElementById("dob").setAttribute("max", today);
});
