...

View Full Version : Resolved jQuery UI Datepicker - Disabling specific dates.



phantom007
10-13-2010, 02:01 PM
Hi

I am using the jQuery UI Datepicker - Event Search (http://jqueryui.com/demos/datepicker/#event-search).

I want to disable specific dates only. For example, I want to disable the following dates only:



10th Oct 2010
21st Oct 2010
12th Nov 2010

I searched in google and found one page (http://davidwalsh.name/dw-content/jquery-datepicker.php) which promised to deliver what I was looking for. But unfortunately it does not seem to work. If you look into its demo, it has disabled ALL dates.


So, has anyone worked on this before, can anyone help me please?


Thanks

SB65
10-13-2010, 02:52 PM
Heh, you're right, that demo page isn't very helpful.

What you need to do is use the beforeShowDay event to call a function to check whether each date in the month that you're about to show is one of your "bad dates". The function called must return an array showing whether the date is available as a boolean, and optionally a class to apply to the resultant date (for highlighting, greying out or whatever).

So something like:


$(function() {
$( "#pickdate" ).datepicker({
dateFormat: 'dd MM yy',
beforeShowDay: checkAvailability
});

})


for the datepicker stuff, and then:



var $myBadDates = new Array("10 October 2010","21 October 2010","12 November 2010");

function checkAvailability(mydate){
var $return=true;
var $returnclass ="available";
$checkdate = $.datepicker.formatDate('dd MM yy', mydate);
for(var i = 0; i < $myBadDates.length; i++)
{
if($myBadDates[i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];
}

So, store the bad dates in an array (for simplicity here). The function sets default return and class values as true and available. Then convert the date to be checked to the right format, and compare this date against each of the bad dates. If there's a match, the return values are set to false/unavailable.

phantom007
10-13-2010, 03:01 PM
Your code is working like a charm (love you)

But when I change the date format in Array() to


var $myBadDates = new Array("2010-10-23","2010-10-21","2010-11-12");

It stops working. What am I missing?

This is my updated code:





<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
numberOfMonths: 3,
showButtonPanel: true,
dateFormat: 'yy MM dd',
beforeShowDay: checkAvailability

});
});

var $myBadDates = new Array("2010-10-23","2010-10-21","2010-11-12");

function checkAvailability(mydate){
var $return=true;
var $returnclass ="available";
$checkdate = $.datepicker.formatDate('yy MM dd', mydate);
for(var i = 0; i < $myBadDates.length; i++)
{
if($myBadDates[i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];
}


</script>

SB65
10-13-2010, 03:05 PM
You need to set the date format on the date to be checked to match that in your array, so this:


$checkdate = $.datepicker.formatDate('yy MM dd', mydate);

needs to be this:


$checkdate = $.datepicker.formatDate('yy-mm-dd', mydate);

phantom007
10-13-2010, 03:12 PM
Genius!


Worked.



Thanks man for your kind help :)


[Reps added]

phantom007
10-13-2010, 05:03 PM
Hi Again

Is there also anyway to disable a date range?


For example, I want to disable all dates between and including

2010-10-23 to 2010-10-29



Thanks again for your help.

SB65
10-13-2010, 05:16 PM
Not that I know of. I guess for "availability" type situations you'd typically hold all the dates with a status in a database, which wouldn't lend itself to having both individual dates and date ranges unavailable.

You can set minDate and maxDate - which will make all dates less than minDate or greater than maxDate unavailable - but I don't think that's what you want here.

phantom007
10-13-2010, 05:31 PM
oh ok

Alternativelym what I can do is, get the start and end date from the database, loop through it and create an array which I can add that to your's code.

But do you know of any php function which can do this for me? I know this is not a PHP section to ask this but please let me know incase you know any such.


thanks

SB65
10-13-2010, 05:40 PM
Yes, that's definitely the way to do it. Here's some php code I've used in a similar situation:


$result = mysql_query("SELECT week_commencing,available FROM test_datepicker");
$i=0;
while($row = mysql_fetch_array($result))
{
$availability[$i]=array("date"=>$row['week_commencing'],"status"=>($row['available'])?"available":"booked");
$i++;
}
$availabilityjson = json_encode($availability);

This is pulling dates and statuses from a database, where the date is a field called week_commencing and the status is held as a boolean field called available. Then looping to build an array and converting that to json, and using that to populate an array for the beforeShowDay function.

Don't know whether that helps.

phantom007
10-13-2010, 06:05 PM
No, sorry, I did not mean that.

I am looking for a php function that would tell me all the dates that fall between two given dates, so for example, I have 2 dates as


Start date: 2010-10-15
End date: 2010-10-20

The function would return an array with the following result


2010-10-15
2010-10-16
2010-10-17
2010-10-18
2010-10-19
2010-10-20



Similarly, if i supply the following dates


Start date: 2010-10-29
End date: 2010-11-02

The function will return


2010-10-29
2010-10-30
2010-10-31
2010-11-01
2010-11-02


Hope you got my point now.


Thanks

SB65
10-13-2010, 06:13 PM
Ah right, see what you mean. I don't know of a php function that will spit out an array of dates like that.

phantom007
10-14-2010, 02:06 PM
No worries.

Thanks anyway for your help.

sandipraja
03-11-2011, 07:34 AM
No, sorry, I did not mean that.

I am looking for a php function that would tell me all the dates that fall between two given dates, so for example, I have 2 dates as


Start date: 2010-10-15
End date: 2010-10-20

The function would return an array with the following result


2010-10-15
2010-10-16
2010-10-17
2010-10-18
2010-10-19
2010-10-20



Similarly, if i supply the following dates


Start date: 2010-10-29
End date: 2010-11-02

The function will return


2010-10-29
2010-10-30
2010-10-31
2010-11-01
2010-11-02


Hope you got my point now.


Thanks

Here is the code


$s_dte='2010-10-15';
$s_dte2=strtotime("-1 day", strtotime($s_dte));
$s=date("Y-m-d",$s_dte2);
$e_dte='2010-10-20';
$diff = abs(strtotime($e_dte) - strtotime($s));


$yrs = floor($diff / (365*60*60*24));
$mnth = floor(($diff - $yrs * 365*60*60*24) / (30*60*60*24));
$days = floor(($diff - $yrs * 365*60*60*24 - $mnth*30*60*60*24)/ (60*60*24));
$t=1;




while($t <= $days){

echo $s.'/n '.;

$date = strtotime("+1 day", strtotime($s));
$s=date("Y-m-d", $date);
$t++;
}

It works.....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum