Datepicker动态最小/最大日期

Question

我在我正在构建的网站上使用jQuery datepicker插件.我需要用户能够在指定的日期范围内选择两个日期.这很容易做到.

问题是允许的日期范围根据另一个选择框(具有建筑物名称)而变化.所以我需要做的是在mysql数据库中查找建筑物,返回允许的最小和最大日期,并使用datepicker允许用户选择允许范围内的日期范围.

在我的主页上,我目前正在使用:

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

加载一个输出的php文件:

<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"/>

从mysql数据库正确填充minDate和maxDate的位置.但是,结果是我只在主页上找到一个带有日期的文本框,而不是datepicker元素.

有什么想法吗？

Answer 1

如果你想这样做,你可以使用datepicker的"beforeShow"属性来帮助你.这是一个伪代码示例.

// 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)
    };
}

您甚至不需要直接查看数据库(尽管如此,您可以 - 在customRange函数中适当调整字段).无论如何,这应该做你需要的.

Answer 2

好吧,我终于想通了.我最初正常定义和使用datepicker.当我需要动态更新它时,我使用:

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

就我而言,我在改变选择框时使用它.

调用mysql数据库的php文件输出以下内容(使用echo):

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

您可以在此处添加要更改的任何日期选择器选项.感谢JasCav,我最终找到了适合解决方案的地方.