Disable dates dynamically in jquery datepicker

Question

In my current project, when the user select a hotel, and when he select the arrival date, and departure date, I have to show the hotel unavailable dates as disabled in jquery datepicker

This is my javascript code

    $("#select_villa").change(function(){
        $('#textfield1').datepicker( "destroy" );                                          
        var dataString = 'villa=' + $("#select_villa").val();
        $.ajax({
            type: "GET",
            url: "include/getdate.php",
            data: dataString,
            dataType: "json",
            success: function(data){


                $('#textfield1').datepicker({
                    dateFormat: 'yy-mm-dd',                                             
                    minDate: data[0].unavailable_date_from,
                    maxDate: data[0].unavailable_date_to
                });

            }
        });
        return false;
    });

Here I have to disable the minDate and maxDate dynamically according to the database availability dates.

This is the result I get when the combobox value changes

[{"unavailable_date_from":"2011-03-03","unavailable_date_to":"2011-03-31"}]

This is my php ajax snippet to get un-available dates

<?php 
include("db.php");
$returnArray = array();
$villa = $_GET['villa'];

$sql = mysql_query("SELECT unavailable_date_from, unavailable_date_to FROM villa WHERE name = '".$villa."'");

while($row = mysql_fetch_object($sql)){
        $returnArray[] = $row;
}
echo json_encode($returnArray);?>

Can anybody tell me how can I achieve this

Thanks

mu is too short · Accepted Answer · 2011-03-08 06:40:09Z

1

You can change the options (such as minDate and maxDate) using the option method:

$('#textfield1').datepicker('option', {
    minDate: newMinDate,
    maxDate: newMaxDate
});

So, in your AJAX success handler, just pull the new dates out of data[0].unavailable_date_from and data[0].unavailable_date_to and send them to the appropriate datepickers as above.

answered Mar 8, 2011 at 6:40

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mujahid Over a year ago

I tried, but when I change my code like this, the datepicker isn't working :(

Mujahid Over a year ago

thanks for ur answer, I removed the 'option' and tried, it works fine,but one thing I wanna do, I wanna set the resulted dates disabled and the rest of the dates enabled, is there a way that I could do it, thanks

mu is too short Over a year ago

@Mujahid: Without the 'option' you're creating a whole new datepicker rather than just updating the options on an existing one. Did you have the datepicker already bound before $('#textfield1').datepicker('option', ...)?

Gats · Accepted Answer · 2011-04-30 08:25:12Z

If you want to disable specific days, you can do it with the onSelect option for the datepicker.

for example:

$('#textfield1').datepicker({
   dateFormat: 'yy-mm-dd',                                             
   minDate: data[0].unavailable_date_from,
   maxDate: data[0].unavailable_date_to
   onSelect: function(dateText, inst) { 
       if ($.inArray(dateText, data[0].unavailable_dates))
       {
           alert('invalid date');
           // do whatever you like here
       }
   });  

}

PS I have made assumptions about your returned data, but think you can see what I'm getting at there. Also make sure that your date formats match from php to the date picker. Otherwise you'll need to convert to Date datatypes in javascript.

Collectives™ on Stack Overflow

Disable dates dynamically in jquery datepicker

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related