Change value of jquery variable based on a select box

Question

I have a jquery datepicker script and what I want to do is to change "minDate: 10" value by a select box. if the first option is selected the minDate:10 , if the second option is selected then minDate:20 etc...

Is it going to update the datepicker in real time every time I select a different selection?

Thanks in advance!

$(function() {
               $('#hotel').change(function() {
                 // assign the value to a variable, so you can test to see if it is working
                 var selectVal = $('#hotel :selected').val();
                 if( selectVal == "hotel_c" ) {
                var date = 10;
                 }
                 if( selectVal == "hotel_a" ) {
                var date = 15;
                 }
                 if( selectVal == "hotel_b" ) {
                var date = 6;
                 }
                });
        var dates = $('#from, #to').datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            dateFormat: 'yy-m-d',
            minDate: 10,
            numberOfMonths: 3,
            onSelect: function(selectedDate) {
                var option = this.id == "from" ? "minDate" : "maxDate";
                var instance = $(this).data("datepicker");
                var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
        });
    });

Answer 1

Modify your change handler to also update the datepicker whenever the select box changes. See datepicker documentation for modifying minDate and other options after initialization. The function will accept a date object or a string representing the date. Assigning a number will disallow date days from today.

$('#hotel').change(function() {
    ...
    var date = // somehow get the date

    // update the date picker
    // need to construct a date string or a date object here
    // will disallow "date" days from today
    $('#from, #to').datepicker('option', 'minDate', date);
});

Answer 2

You can write your change handler like this:

var hotelMap = { hotel_a: 15, hotel_b: 6, hotel_c: 10 };
$('#hotel').change(function() {
  var selectVal = $('#hotel :selected').val();
  $("#from, #to").datepicker("option", "minDate", hotelMap[selectVal]);
});

This has 2 changes, we're calling the .datepicker('option', 'minDate', val) method, and we're using an object to map the date ranges to clean it up a bit. This will only let you select a date 15, 6, or 10 days out depending on your selection.

You can see this with the rest of your code working here