Datepicker dynamic min / max dates

问题:

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 enough to do.

The problem is that the allowable range of dates changes depending on another select box (with building names in). So what I need to happen is to look up the building in a mysql database, return the min and max date allowed and use the datepicker to allow users to choose a date range within the allowable range.

On my main page, I am currently using:

$('#dateStartMainChart').load(url);

to load a php file which outputs:

<script> 
$(function() {
    $( "#dateEndMainChartSelect" ).datepicker({ 
        dateFormat: 'yy-mm-dd',
        defaultDate: -1,
        minDate: new Date(2011,03,03),
        maxDate: +0,
            firstDay: 1,
        changeMonth: true,
        changeYear: true
    });
}); 
</script>
<input type="text" class="text" value=2011-03-04 id="dateEndMainChartSelect" align="center"/>

where the minDate and maxDate have been populated correctly from the mysql database. However, the result is that I just get a text box with the date in it on my main page instead of the datepicker element.

Any thoughts?

回答1:

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.

回答2:

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.