我有多个链接触发显示日期选择器的对话框。每个日期选择器都具有基于数据属性的日期范围。我的问题是日期选择器仅显示您单击的第一个链接的范围。 这是我到目前为止的代码:
<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/
答案 0 :(得分:0)
单击第二个链接(单击第一个链接后)时,第一个日期选择器仍绑定到对话框的输入字段。我添加了以下代码,以便在关闭对话框时完全删除datepicker:
close: function(event, ui){
$(".tanggalan").datepicker("destroy");
...
}
当对话框关闭时,这将删除日期选择器,以便下次创建一个时,它包含正确的最小和最大日期。
请参阅here获取小提琴。
答案 1 :(得分:0)