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

其中minDate和maxDate已从mysql数据库正确填充。但是，结果是我只在主页上找到了一个带有日期的文本框，而不是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(); });

在我的情况下，我在改变选择框时使用它。

调用的php文件查询mysql数据库输出以下内容（使用echo）：

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

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

Datepicker动态最小/最大日期

2 个答案: