Datepicker dynamic min / max dates

Question

I\'m using the jQuery datepicker plugin on a site I am building. I need users to be able to pick two dates from within a specified range of dates. This is straightforward en

Answer 1

OK, I finally figured this out. I initially define and use the datepicker as normal. When I need to dynamically update it, I use:

$.getScript('url.php', function() {updateDate(); });

In my case, I use this on change of a select box.

The php file that is called queries a mysql database outputs the following (using echo):

function updateDate() {
        $( "#dateStartMainChartSelect" ).datepicker('change',{ 
            minDate: new Date(2011,01,01),
            maxDate: new Date(2011,02,01)
        });
    }

You can add any of the datepicker options here that you want to change. Thanks to JasCav, I ended up looking in the right places for the solution.

Answer 2

If you want to do this, you can use the "beforeShow" attribute of datepicker to help you out. Here is a pseudo-code example.

// Your start and end datepickers.
$('#dateStartMainChart, #dateEndMainChartSelect').datetimepicker({
    beforeShow: customRange
});

// I can't take credit for this...website to tutorial is below.
// From: http://test.thecodecentral.com/cms/jqueryui/datepicker/
function customRange(input) {
    return { minDate: (input.id == 'dateEndMainChartSelect' ? $('#dateStartMainChart').datepicker('getDate') : null),
        maxDate: (input.id == 'dateStartMainChart' ? $('#dateEndMainChartSelect').datepicker('getDate') : null)
    };
}

You don't even need to look at the database directly (although, you can - adjust the fields appropriately in the customRange function). In any case, this should do what you need.