jquery datepicker disable dates

[talisien]

Hi All,

I found this code to disable dates in jquery datepicker

$(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];
}

Now I'm getting my dates from a mysql table like this

$.getJSON('checkDates.php?dld='+ id,
                function(json) {
			 for( var i in json) {
            
			   $myBadDates = new Array(json[i].start);
                         
			 }


         }

          );

This code works except only the last entry of the database table is disabled in the datepicker. I guess $myBadDates = new Array(json.start); isn't the right code of creating an array from json?

How do I create an javascript array from json?

Thanks,

Leon

[talisien]

update dateFormat should be "dd-MM-YY"

[Airshow]

Leon,

How do I create an javascript array from json?

It depends entirely on what is JSON-encoded server-side.

If you get the php script right then it should be as simple as:

$.getJSON('checkDates.php?dld='+id, function(json){$myBadDates=json;});

To achieve this, return a JSON-encoded php array of "start" dates.

Airshow

[talisien]

Below is my php code. So far as I know is it correct?

<?php
$sql= "SELECT start from gbh_rooster_afwijkend WHERE dlnmrID = '".$_GET['dld']."'";
$res = mysql_query($sql) or die(mysql_error());

$checkDates = array();

   while ($row = mysql_fetch_assoc($res)) {
	  
	$checkDate['start'] = $row['start'];
	
	$checkDates[] = $checkDate;   
   }	
 echo json_encode($checkDates);  

?>

The output is:

[{"start":"05-12-2011"},{"start":"12-12-2011"},{"start":"19-12-2011"}]

Airshow

Your code does not work to disable dates

$.get('script/php/afwijkendrooster/checkDates.php?dld='+ id, function(json){$myBadDates=json;}  );

alert($myBadDates);

outputs [{"start":"05-12-2011"},{"start":"12-12-2011"},{"start":"19-12-2011"}]

But this must be ("05-12-2011", "12-12-2011", "19-12-2011")
My question is how decode json to the string above?

[Airshow]

As it stands, my one-liner is a replacement for the second code block in your original post. It will not, in itself, disable anything.

To get any use from them you need to do something with the dates in the array. I am not an expert on datePicker but guess that you need to invoke your checkAvailability() function (or something based on it) from the $.getSJON callback.

In your latest post, somehow $.getJSON(...) has become $.get(...) . $.getJSON(...) is the key to decoding the returned string into a javascript array.

Airshow

[talisien]

Airshow,

I noticed the error in my code.

I do understand that

$.getJSON('script/php/afwijkendrooster/checkDates.php?dld='+ id, function(json){$myBadDates=json;}  );

will not disable dates, but this code will.

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];
 }

To get both working together i came up with this

$.getJSON('script/php/afwijkendrooster/checkDates.php?dld='+ id, function(json){dates=json;});

function checkAvailability(mydate){
	var myObject = dates;
		for( var x in myObject) {
           $myBadDates = new Array(myObject[x]['start']);

			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];
			 }
}

This works, but only the first date found in the array is disabled.

How do I loop all dates in the array to disable them?
I appreciate all help

[talisien]

I got it working

$.getJSON('script/php/afwijkendrooster/checkDates.php?dld='+ id, function(json){dates=json;});

function checkAvailability(mydate){
	var myBadDates = dates;
						  
			var $return=true;
			var $returnclass ="available";
			$checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);
			
	                // start loop
			for(var x in myBadDates)
			 {  

			 $myBadDates = new Array( myBadDates[x]['start']);	

			   for(var i = 0; i < $myBadDates.length; i++)
				
				 if($myBadDates[i] == $checkdate)
				   {
					    $return = false;
				            $returnclass= "unavailable";
				   }
			  }
                          //end loop

			return [$return,$returnclass];
}

Above code loops through all dates found in the array and disables them in Datepicker.

[Airshow]

OK, it would appear that only the first date is disabled is because the function doesn't actually do the disabling. It returns an array that is processed elsewhere to give the desired effect.

Looping through dates therefore needs to be performed not inside checkAvailability() but where checkAvailability() is called.

To fix it I would need :

• to see the code surrounding the $.getJSON(...) statement
• to see the code where checkAvailability() is called
• to know the scope of dates .

I have a feeling that the eventual solution will be very simple.

It's all to do with scope and knowing how the array returned by checkAvailability() is used.

Airshow

[Airshow]

OK, you have fixed it. That's great.

However I don't begin to understand how your code achieves what you say.

Airshow

[Airshow]

Looping through an array with for(var x in arr){} is decidedly dodgy. The order is unpredictable and x could point to objects other than the array elements.

Besides, there appears to be no value in looping and certainly no point having two nested loops.

Unless I have made a mistake, your latest version of checkAvailability() will simplify to:

function checkAvailability(mydate){
	var $checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);
	var d = dates[dates.length-1];//or any of the other elements from the dates array.
	return (d.start == $checkdate) ? [false,"unavailable"] : [true,"available"];
}

Airshow

[talisien]

I've tried your simplified code, but it only disables the last date found in the array.
I think that looping is needed to check all dates found in the array against the dates in datepicker.
Otherwise it will look only at the last date in the array.

But you made me thinking of how i could make my code simpler and came up with this one.
It has now one loop instead of two.

function checkAvailability(mydate){
 var $return=true;
 var $returnclass ="available";
 $checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);
   
   for(var i in dates)	{  
			
     if(dates[i].start == $checkdate)  {
	$return = false;
	$returnclass= "unavailable";
     }

   }
			
return [$return,$returnclass];
}

I appreciate your help on this and i'm open for other suggestions.

Leon

[Airshow]

Leon,

OK, that looks much better.

Airshow

[talisien]

Thanks Airshow.

It took me awhile to get things right but i'm happy with the result.
I'm marking this thread as solved!

Leon

[Airshow]

Leon,

Just one small thing I didn't spot earlier. $checkdate should be localised to avoid creating an unintentional global variable.

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

Airshow