Menu
I am trying to disable specific dates using the JQuery Ui. However, I am having no luck, here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<style type="text/css">
.ui-datepicker .preBooked_class { background:#111111; }
.ui-datepicker .preBooked_class span { color:#999999; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker</title>
<script type="text/javascript" src="development-bundle/jquery-1.7.1.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>
Instantiate datepicker object
<script type="text/javascript">
$(function() {
$( "#iDate" ).datepicker({
dateFormat: 'dd MM yy',
beforeShowDay: checkAvailability
});
})
Get the dates to be disabled within the calendar
var unavailableDates = ["9-3-2012","14-3-2012","15-3-2012"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false,"","Unavailable"];
}
}
$('#iDate').datepicker({ beforeShowDay: unavailable });
</script>
</head>
<body>
<input id="iDate">
</body>
</html>
It doesn't seem to be working, any idea how I can resolve this. cheers.
947
jQuery UI disable() method is used to disable the datepicker. Parameters: This method does not accept any parameters.
In the calendar widget their is an option to select max date, in which you can set the value as CurrDate(). So that future dates in the calendar would be disabled.
DateRangePicker can be inactivated on a page, by setting enabled value as false that will disable the component completely from all the user interactions including in form post.
To disable the weekends in Bootstrap Datepicker you need to set the daysOfWeekDisabled property value to [0, 6]. Then all the Weekends will be disabled in the datepicker control.
It looks like you're calling datepicker twice on one input. Its kind of hard to follow your code, but if you re-organize it and remove the second datepicker call, everything should work:
<script type="text/javascript">
var unavailableDates = ["9-3-2012", "14-3-2012", "15-3-2012"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#iDate").datepicker({
dateFormat: 'dd MM yy',
beforeShowDay: unavailable
});
});
</script>
Check this article: disable-dates-in-datepicker
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
