jQuery ui datepicker的动态minDate和maxDate

时间:2014-04-07 03:48:04

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

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

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

2 个答案:

答案 0 :(得分:0)

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

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

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

请参阅here获取小提琴。

答案 1 :(得分:0)

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

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

Demo here