Question

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

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

Answer 1

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

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

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

请参阅here获取小提琴。

Answer 2

不是一遍又一遍地初始化对话框和日期选择器，而是重新安排代码：

在文档就绪时初始化对话框和日期选择器：
- 不要在datepicker上设置最短和最长日期
- 将对话框的autoOpen属性设置为false
点击链接时：
- 触发datepicker上的option方法设置minDate和maxDate
- 触发对话框
- 触发datepicker上的show方法

Demo here

jQuery ui datepicker的动态minDate和maxDate

2 个答案: