January 29, 2010

Disabling Specific Dates in JQuery Datepicker plugin

I was looking for a way to hack the JQery UI Datepicker plugin to make it functioning application specific. While searching I found a great solution with a nice at David Walsh Blog. He depicted the total solution on the basis of making an array of the days he wanted to restrict the users to select. The demo was just superb!

But unfortunately my application requires something similar but not the same which restricted me to just use Mr. David's code or solution. I have a reservation site to work on and I have to restrict users to ask for booking a house in a date when it is already booked. So I started to use Mr. David's code and tried to match with my requirements. I used php as my server side scripting Language.

Here are the steps :::

(i) First I fetched the specifics date ranges from database when the houses are booked. The format is starting date and duration.

(ii) Then I ran loops to get the explicit dates when the house is booked already.

<?php
$sql = "SELECT arrivaldate, duration FROM tbl_booking WHERE houseID = 1 AND bookingstatus = 1";
$res = mysql_query($sql);
$i = 0;
while($row = mysql_fetch_array($res))
{
  $arrivaldate = $row['arrivaldate'];
  $duration = $row['duration'];

  for($j = 0; $j<$duration; $j++)
  {
     if($j == 0)
     {
      $date[$i] = $arrivaldate;
     }
     else
     {
        $cd = strtotime($arrivaldate);
        $retDAY = date('Y-m-d', mktime(0,0,0,date('m',$cd),date('d',$cd)+$j,date('Y',$cd)));
        $date[$i] = $retDAY;
     }

     $i++;
  }
}
?>
(iii) Now feeding the php array to javascript because the final calculation will take place within javascript while calling the datepicker function.
<script type="text/javascript" language="javascript">
    var disabledDays = new array();
</script>

<?php
     $totaldates = count($date);

     for($k = 0; $k <$totaldates; $k++)
     {
?>
  

<script type="text/javascript" language="javascript">
     disabledDays[$k] = <?php echo $date[$k]; ?>
  </script>

<?php
      }
?>


(iv) Mr. David set a function that reply true or false when the passed date is a holiday or not. But in our case we don't need that as we are thinking about blocking the already booked dates.

But we have to setup a function in order to check the disabled array. So the code will be like:

<script type="text/javascript" language="javascript">
     function ifDisabled(date) 
     {
 var m = date.getMonth();
        var d = date.getDate();
        var y = date.getFullYear();
 
 for (i = 0; i < disabledDays.length; i++) 
        {
     if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) 
            {
  return [false];
     }
 }
 return [true];
     }       
 
</script>


(v) Now we have to right another function which will call the above function while populating the date and which will send each and every date to the above function and if the response is true it will allow to select the date and if the response is false it will restrict to select the date.

The function will be like as follows:

<script type="text/javascript" language="javascript">
     function checkDisabled(date) 
     {
 return ifDisabled(date);
     }
</script>


(vi) Finally we will call the datepicker plugin and pass parameters like minimum date and maximum date and the disabled dates. The code will be as follows:

<script type="text/javascript" language="javascript">
$(document).ready(function(){
        var today  = new Date();
        var d = today.getDate();
        var m = today.getMonth();
        var y = today.getFullYear();
 
 jQuery('#date').datepicker({
  minDate: new Date(y, m, d),
  maxDate: new Date(y, 11, 31),
  dateFormat: 'yy-mm-dd',
  constrainInput: true,
  beforeShowDay: checkDisabled
 });
});
</script>


(vii) So if we sum this up, we can have the total code as mentioned below.

<link type="text/css" href="styles/ui.all.css" rel="stylesheet"/>
  <link type="text/css" href="styles/ui.datepicker.css" rel="stylesheet" />

  <script type="text/javascript" src="scripts/jquery.js"></script>
  <script type="text/javascript" src="scripts/ui.core.js"></script>
  <script type="text/javascript" src="scripts/ui.datepicker.js"></script>


<?php
$sql = "SELECT arrivaldate, duration FROM tbl_booking WHERE houseID = 1 AND bookingstatus = 1";
$res = mysql_query($sql);
$i = 0;
while($row = mysql_fetch_array($res))
{
  $arrivaldate = $row['arrivaldate'];
  $duration = $row['duration'];

  for($j = 0; $j<$duration; $j++)
  {
     if($j == 0)
     {
      $date[$i] = $arrivaldate;
     }
     else
     {
        $cd = strtotime($arrivaldate);
        $retDAY = date('Y-m-d', mktime(0,0,0,date('m',$cd),date('d',$cd)+$j,date('Y',$cd)));
        $date[$i] = $retDAY;
     }

     $i++;
  }
}
?>

<script type="text/javascript" language="javascript">
    var disabledDays = new array();
</script>

<?php
     $totaldates = count($date);

     for($k = 0; $k <$totaldates; $k++)
     {
?>
  

<script type="text/javascript" language="javascript">
     disabledDays[$k] = <?php echo $date[$k]; ?>
  </script>

<?php
      }
?>

<script type="text/javascript" language="javascript">
     function ifDisabled(date) 
     {
 var m = date.getMonth();
        var d = date.getDate();
        var y = date.getFullYear();
 
 for (i = 0; i < disabledDays.length; i++) 
        {
     if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) 
            {
  return [false];
     }
 }
 return [true];
     }       
  
     function checkDisabled(date) 
     {
 return ifDisabled(date);
     }

     $(document).ready(function(){
        var today  = new Date();
        var d = today.getDate();
        var m = today.getMonth();
        var y = today.getFullYear();
 
 jQuery('#date').datepicker({
  minDate: new Date(y, m, d),
  maxDate: new Date(y, 11, 31),
  dateFormat: 'yy-mm-dd',
  constrainInput: true,
  beforeShowDay: checkDisabled
 });
    });
</script>


(viii) And that worked perfectly! Three cheers to Mr. David Walsh.

8 comments:

  1. Hi,

    I would like to have help to my problem.
    http://www.codingforums.com/showthread.php?t=216140

    I want to disable days with red mark in my datePicker from my PHP file.

    Here is example:
    http://vetokuja.fi/vainpaivat.php
    It reads only dates from my MYSQL, and I want to disable those days (with red-mark) in my datePicker.

    Please help me!

    villeville500@wippies.fi

    ReplyDelete
  2. Dear Finalandian Annonymous,
    I have read your problem in the forum and think my solution here will work. But I couldn't see your site as it shows mysql error. For anymore help you can talk to me directly to nagbaba@live.com or hnrana at google talk.

    I am still confident that my code will work .... as it is being used in several reservation management sites currently.


    so I will be waiting for your reply.

    Have a nice day.

    ReplyDelete
  3. This is very useful and I've been searching for months for this. Bookmarked and shall check it up later

    ReplyDelete
  4. http://www.symphonywalton.com/walton-primo-x4price-bd-specification/
    http://www.symphonywalton.com/symphony-zvii-3gb-ram-price-bd-spec/
    http://www.symphonywalton.com/helio-s2-specification-price-bangladesh
    http://www.symphonywalton.com/symphony-v32-specification-price-bd/

    ReplyDelete