Datepicker disabled selected dates
How to Disable Selected Dates in jQuery Datepicker
In this article, we will explore how to disable specific dates in the jQuery Datepicker. This can be particularly useful for scenarios where certain dates need to be restricted, such as holidays or weekends.
Disabling the Last Day of Every Month
The following script disables the last day of every month using the beforeShowDay
method:
$("#date").datepicker({
beforeShowDay: function (date) {
var day = date.getDate();
var month = date.getMonth();
var currentValue = new Date(2015, month + 1, 0);
if (day == currentValue.getDate()) {
return [false];
} else {
return [true];
}
},
dateFormat: 'dd-M-yy'
});
Customizing Disabled Dates
You can customize the disabled dates by passing an array of dates. Here’s an example:
<script type="text/javascript">
var unavailableDates = ["28-7-2015", "3-7-2015", "30-7-2015"];
function unavailable(date) {
var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, "", "Available"];
} else {
return [false, "", "Unavailable"];
}
}
$(function () {
$("#iDate").datepicker({
dateFormat: 'dd MM yy',
beforeShowDay: unavailable
});
});
</script>
Disabling Weekends
To disable weekends, you can use the noWeekends
property:
$('#pickDate').datepicker({
dateFormat: "dd/mm/yy",
beforeShowDay: $.datepicker.noWeekends,
minDate: new Date(2012, 9, 25)
});
Conclusion
By using these methods, you can easily disable specific dates, weekends, or any custom set of dates in the jQuery Datepicker. This can help in creating a more controlled and user-friendly date selection process.
- Submitted By Vibhuti Singh
- Category jquery
- Created On 22-Aug-2024