jQuery ui datepicker 的动态 minDate 和 maxDate答案

【问题标题】：Dynamic minDate and maxDate for jQuery ui datepickerjQuery ui datepicker 的动态 minDate 和 maxDate
【发布时间】：2014-04-07 03:48:03
【问题描述】：

我有多个链接触发显示日期选择器的对话框。每个日期选择器都有基于数据属性的日期范围。我的问题是日期选择器仅显示您单击的第一个链接的范围。这是我到目前为止的代码：

<div id="dialog" style="display:none">
    <input class="tanggalan" value="2014-04-03"/>
</div>
<a class="date-dialog" href="#" data-tgl-min="2013-03-12" data-tgl-max="2013-04-12">min: 2013-03-12 and max: 2013-04-12</a><br />
<a class="date-dialog" href="#" data-tgl-min="2013-04-15" data-tgl-max="2013-05-15">min: 2013-04-15 and max: 2013-05-15</a><br /><br />

这是针对 JavaScript 的：

$(".date-dialog").live("click", function () {
    var minDates = $(this).data('tgl-min');
    var maxDates = $(this).data('tgl-max');
    $('#dialog').dialog({
        height: 250,
        modal: true,
        buttons: {
            "Batal": function () {
                $(this).dialog("close");
                var minDates = '';
                var maxDates = '';
            }
        },
        open: function (event, ui) {
            //show datepicker
            $(".tanggalan").datepicker({
                minDate: minDates,
                maxDate: maxDates,
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true,
            });
            $(".tanggalan").datepicker("show");
        },
        close: function (event, ui) {
            //console.log('ditutup');
            //trying to clear the variable, 
            //cleared but still false to display date range if i click another link
            var minDates = '';
            var maxDates = '';
            console.log(minDates + ' --> ' + maxDates);
        }
    });
});

完整代码，我已经放在这里了：http://jsfiddle.net/ajibari/4d23Y/

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog jquery-ui-datepicker custom-data-attribute

【解决方案1】：

当您单击第二个链接（单击第一个链接后）时，第一个日期选择器仍绑定到对话框上的输入字段。我添加了以下代码以在对话框关闭时完全删除日期选择器：

close: function(event, ui){
    $(".tanggalan").datepicker("destroy");
    ...
}

这会在对话框关闭时删除日期选择器，以便下次创建它时包含正确的最小和最大日期。

请参阅here 获取小提琴。

【讨论】：