Datepicker动态最小/最大日期

时间:2011-03-04 16:36:56

标签: jquery datepicker uidatepicker jquery-ui-datepicker

我在我正在构建的网站上使用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元素。

有什么想法吗?

2 个答案:

答案 0 :(得分:8)

如果你想这样做,你可以使用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函数中适当调整字段)。无论如何,这应该做你需要的。

答案 1 :(得分:5)

好的,我终于想通了。我最初正常定义和使用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,我最终找到了合适的解决方案。