Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts

    Question jQuery UI Datepicker - Disabling specific dates.

    Hi

    I am using the jQuery UI Datepicker - Event Search.

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

    Code:
    10th Oct 2010
    21st Oct 2010
    12th Nov 2010
    I searched in google and found one page 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
    Last edited by phantom007; 10-13-2010 at 03:14 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

    Code:
    $(function() {
            $( "#pickdate" ).datepicker({
                dateFormat: 'dd MM yy',
                beforeShowDay: checkAvailability
                });
                
    })
    for the datepicker stuff, and then:

    Code:
    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.

  • Users who have thanked SB65 for this post:

    phantom007 (10-13-2010)

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    Your code is working like a charm (love you)

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

    Code:
    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:



    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>

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You need to set the date format on the date to be checked to match that in your array, so this:

    Code:
    $checkdate = $.datepicker.formatDate('yy MM dd', mydate);
    needs to be this:

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

  • Users who have thanked SB65 for this post:

    phantom007 (10-13-2010)

  • #5
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    Genius!


    Worked.



    Thanks man for your kind help


    [Reps added]

  • #6
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    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.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    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

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, that's definitely the way to do it. Here's some php code I've used in a similar situation:

    PHP Code:
    $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.

  • #10
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    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

    Code:
    Start date: 2010-10-15
    End date: 2010-10-20
    The function would return an array with the following result
    Code:
    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
    Code:
    Start date: 2010-10-29
    End date: 2010-11-02
    The function will return

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

    Hope you got my point now.


    Thanks

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Ah right, see what you mean. I don't know of a php function that will spit out an array of dates like that.

  • #12
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    No worries.

    Thanks anyway for your help.

  • #13
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by cancer10 View Post
    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

    Code:
    Start date: 2010-10-15
    End date: 2010-10-20
    The function would return an array with the following result
    Code:
    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
    Code:
    Start date: 2010-10-29
    End date: 2010-11-02
    The function will return

    Code:
    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
    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.....


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •