Improve User Experience: Enable, Disable, and Customise Date Selection Using JQuery UI Datepicker
Using jQuery UI Datepicker to Implement Date Selection and Customization: Live Demo and Code Samples
In this tutorial, we'll look at how to use jQuery and jQuery UI to enable and deactivate custom dates in a date picker. The jQuery UI date picker plugin is frequently used to provide a simple calendar interface for selecting dates and months. The selected date from the calendar is automatically transmitted to the textbox when it is integrated with an input text box.
To begin, we'll use CDN links to add the essential libraries and styles. For any jQuery UI widget to be displayed, we must include both jQuery and jQuery UI, which can be downloaded or utilized via CDN. The jQuery UI theme can also be customized, but in this example, we'll go with the default.
We will cover how to put into effect the following problems and solutions:
- EX 01: Disabled Sunday and Friday
- EX 02: Enabled Monday and Friday
- EX 03: Disabled date from 27th Aug to 30th Aug 2023
- EX 04: Disabled date from 26th Aug to 29th aug 2023 and 2nd September to 5th September
- EX 05: Only Enable date from 26th Aug to 30th aug and 5th September
- EX 06: Enable Month and years dropdown for the previous 100 years and current years
- EX 07: Enable Month and years dropdown for the Next 100 years and current years
- EX 08: Enable Month and years dropdown for the Next 100 years and the previous 100 years
- EX 09: Disabled future date
- EX 10: Disabled Past date
EX 01: Disabled Sunday and Friday
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class=" col-md-10 bg-light border p-3 my-3">
<div class="form-group">
<h3> EX 01: Disabled sunday and Friday</h3>
<label for="datepicker_c1">Select date</label>
<input type="text" name="" id="datepicker_c1" class="form-control" placeholder="select date">
</div>
</div>
input {
max-width: 400px;
}
// Disabled sunday and Friday
function disabledDays(date) {
/* 0= sunday, 1= Monday, 2=tuesday, 3= wednesday, 4=thursday, 5=friday, 6=suturday */
if (date.getDay() === 0 || date.getDay() === 5) {
return [false, "closed", "Closed"]
}
else {
return [true, "", "Available"]
}
}
$("#datepicker_c1").datepicker({
beforeShowDay: disabledDays,
showButtonPanel: true,
closeText: "close",
showWeek: true,
weekHeader: "Week",
});
EX 10: Disabled Past date
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="col-md-10 bg-light border p-3 my-3">
<div class="form-group">
<h3> EX 10: Disabled Past date</h3>
<label for="datepicker_c10">Select Appointment date</label>
<input type="text" name="" id="datepicker_c10" class="form-control" placeholder="Appointment date">
</div>
</div>
input {
max-width: 400px;
}
// Disabled Past date
$(function () {
$("#datepicker_c10").datepicker({ minDate: new Date() });
});
EX 02: Enabled Monday and Friday
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="col-md-10 bg-light border p-3 my-3">
<div class="form-group">
<h3> EX 02: Enabled Monday and Friday</h3>
<label for="datepicker_c2">Select date</label>
<input type="text" name="" id="datepicker_c2" class="form-control" placeholder="select date">
</div>
</div>
input {
max-width: 400px;
}
//Enabled Monday and Friday
function enabledDays(date) {
/* 0= sunday, 1= Monday, 2=tuesday, 3= wednesday, 4=thursday, 5=friday, 6=suturday */
if (date.getDay() === 1 || date.getDay() === 5) {
return [true, "", "Available"]
}
else {
return [false, "", "Closed"]
}
}
$("#datepicker_c2").datepicker({
beforeShowDay: enabledDays
});
EX 03: Disabled date from 27th aug to 30th aug 2023
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="col-md-10 bg-light border p-3 my-3">
<div class="form-group">
<h3> EX 03: Disabled date from 27th aug to 30th aug 2023</h3>
<label for="datepicker_c3">Select date</label>
<input type="text" name="" id="datepicker_c3" class="form-control" placeholder="select date">
</div>
</div>
input {
max-width: 400px;
}
// Disabled date from 27th aug to 30th aug 2023
var disabledDates1 = ["27-08-2023", "28-08-2023", "29-08-2023", "30-08-2023"];
$('#datepicker_c3').datepicker({
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
//var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [disabledDates1.indexOf(string) == -1]
}
});
EX 04: Disabled date from 26th Aug to 29th aug 2023 and 2nd september to 5th september
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="col-md-10 bg-light border p-3 my-3">
<div class="form-group">
<h3> EX 04: Disabled date from 26th Aug to 29th aug 2023 and 2nd september to 5th september</h3>
<label for="datepicker_c4">Select date</label>
<input type="text" name="" id="datepicker_c4" class="form-control" placeholder="select date">
</div>
</div>
input {
max-width: 400px;
}
// Disabled date from 26th Aug to 29th aug 2023 and 2nd september to 5th september
var disabledDates2 = ["27-08-2023", "27-08-2023", "28-08-2023", "29-08-2023", "02-09-2023", "02-09-2023", "03-09-2023", "04-09-2023", "05-09-2023"];
$('#datepicker_c4').datepicker({
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
//var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [disabledDates2.indexOf(string) == -1]
}
});
EX 05: Only Enable date from 26th Aug to 30th aug and 5th september
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="col-md-10 bg-light border p-3 my-3">
<div class="form-group">
<h3> EX 05: Only Enable date from 26th Aug to 30th aug and 5th september</h3>
<label for="datepicker_c5">Select date</label>
<input type="text" name="" id="datepicker_c5" class="form-control" placeholder="select date">
</div>
</div>
input {
max-width: 400px;
}
// Only Enable date from 26th Aug to 30th aug and 5th september
var availableDates = ["26-8-2023", "27-8-2023", "28-8-2023", "29-8-2023", "2-9-2023", "2-9-2023", "3-9-2023", "4-9-2023", "5-9-2023",];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) != -1) {
return [true, "", "Available"];
} else {
return [false, "", "unAvailable"];
}
}
$('#datepicker_c5').datepicker({ beforeShowDay: available });
EX 06: Enable Month and years dropdown for previous 100 years and current years
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="col-md-10 bg-light border p-3 my-3">
<div class="form-group">
<h3> EX 06: Enable Month and years dropdown for previous 100 years and current years</h3>
<label for="datepicker_c6">Select date</label>
<input type="text" name="" id="datepicker_c6" class="form-control" placeholder="select date">
</div>
</div>
input {
max-width: 400px;
}
// Enable Month and years dropdown for previous 100 years
$(function () {
$("#datepicker_c6").datepicker({
yearRange: "c-100:c+0",
changeMonth: true,
changeYear: true,
maxDate: 0,
dateFormat: "dd-mm-yy",
duration: "fast"
});
});
EX 07: Enable Month and years dropdown for Next 100 years and current years
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="col-md-10 bg-light border p-3 my-3">
<div class="form-group">
<h3> EX 07: Enable Month and years dropdown for Next 100 years and current years</h3>
<label for="datepicker_c7">Select date</label>
<input type="text" name="" id="datepicker_c7" class="form-control" placeholder="select date">
</div>
</div>
input {
max-width: 400px;
}
// Enable Month and years dropdown for Next 100 years
$(function () {
$("#datepicker_c7").datepicker({
yearRange: "c+0:c+100",
changeMonth: true,
changeYear: true,
dateFormat: "dd-mm-yy",
duration: "fast"
});
});
EX 08: Enable Month and years dropdown for Next 100 years and previous 100 years
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="col-md-10 bg-light border p-3 my-3">
<div class="form-group">
<h3> EX 08: Enable Month and years dropdown for Next 100 years and previous 100 years</h3>
<label for="datepicker_c8">Select date</label>
<input type="text" name="" id="datepicker_c8" class="form-control" placeholder="select date">
</div>
</div>
input {
max-width: 400px;
}
// Enable Month and years dropdown for previous 100 years and Next 100 Years
$(function () {
$("#datepicker_c8").datepicker({
yearRange: "c-100:c+100",
changeMonth: true,
changeYear: true,
//minDate: 0,
dateFormat: "dd-mm-yy",
duration: "fast"
});
});
EX 09: Disabled future date
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="col-md-10 bg-light border p-3 my-3">
<div class="form-group">
<h3> EX 09: Disabled future date</h3>
<label for="datepicker_c9">Select date of birth</label>
<input type="text" name="" id="datepicker_c9" class="form-control" placeholder="Date of birth">
</div>
</div>
input {
max-width: 400px;
}
// Disabled future date
$(function () {
$("#datepicker_c9").datepicker({ maxDate: new Date() });
});
