You can disable specific dates with the jQuery Datepicker using the beforeShowDay event.
var unavailableDates = ["9-5-2011","14-5-2011","15-5-2011"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false,"","Unavailable"];
return [false,"","Unavailable"];
}
}
}
$('#iDate').datepicker({ beforeShowDay: unavailable });
Note: iDate in the last line is the name of the HTML form input element.
Cool - that worked for me... Thanks!
its awsummmmmmmm wonderful thank you so much you solved my problem.
thank you :)
I works perfectly, thanks. Would you know how to load the dates of the array dynamically, from a database?
First you would need to make an SJAX call to a PHP file that would have something like this:
$dates = array();
$sqldata = mysql_query("SELECT `date` FROM `date_table`);
while($date = mysql_fetch_assoc($sqldata)) {
$dates[] = $date;
}
echo json_encode($dates);
Then on the JavaScript side:
unavailableDates = new Array();
unavailableDates = eval("("+result+")");
result being the returned data from the SJAX call see:
http://tokenposts.blogspot.com/2011/05/javascript-ajax-sjax-submit-form-data.html
Nice one.. Was wondering how to and did not noticed this option in the documentation.. So thanks :)
thanks very useful
hey thank you very much it's really nice
Would you be able to show a jsfiddle so that all dates are disabled except for ones in the array?
Hi Jenny,
Simply swap the IF ELSE statement.
http://jsfiddle.net/XxwSZ/
It is possible to get a working example for the people that doesn't know to integrate it in a webpage??? (the people...is me...) Tks....
just what I was looking for, thanks!
Its working.
But not working with dates
var unavailableDates = ["09-05-2011","14-05-2011","15-05-2011"];
Great post! :D
I have looked for something like this for a looong time! :D
Hi, thanks a lot for that, it's working perfect except one thing, when I use ajax to get the unavailability from the database, i get a javascript error:
ba is undefined
/js/libs/jquery-ui-1.8.18.custom.min.js
Line 47
if I remove the ajax statement and use the basic function I dont get the error. I compared the array return from the db to the one in the example and they look exactly the same. here is my js function:
$.post(
base_url+"booking/getDates", {house: house, room: room},
function(data){
unavailableDates = new Array();
unavailableDates = data;
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
console.log("unavailableDates: ", unavailableDates);
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false,"","Unavailable"];
}
},"json"
);
Thank you in advance
Post a Comment