我正在使用jQuery ui Datepicker显示一个包含“特殊日期”(带颜色)的年度内联日历.
这是为了允许用户通过选择范围和一些其他细节来批量特殊日期.
$('#calendar').datepicker({
...,onSelect: function (selectedDate,inst) {
$('.date_pick').toggleClass('focused');
if ($('.date_pick.end').hasClass('focused')) {
$('.date_pick.end').val('');
}
# inst.preventDefault() ? <- not a function
# inst.stopPropagation() ? <- not a function
# return (false) ? <- calendar refreshes anyway
}
...
});
我也使用qtip来显示每个日期的细节
我的问题是当我点击日历,它完全重新加载,所以我松开我的qtips.
我不喜欢用qtip来使用live(),因为我不喜欢这个行为.
我也更喜欢日历不会刷新每次我点击它(但这似乎不可能反正),但我可能不再能够突出我的选择了.
你有建议我的问题吗？
解决方法
我有一个类似的问题.我正在添加自定义按钮到datepicker的底部(使用$(id).append),但是当我选择一个日期datepicker将刷新并销毁它们.
这是jquery-ui库中datepicker的日期选择功能：
_selectDate: function(id,dateStr) {
...
if (onSelect)
onSelect.apply((inst.input ? inst.input[0] : null),[dateStr,inst]);
...
if (inst.inline)
this._updateDatepicker(inst);
...
},
如您所见,该函数首先调用onSelect事件,然后调用_updateDatepicker(这是重写该表单),如果inst.inline为true.
这是我的解决方法,以防止表单刷新,同时保持选择功能：
$("#cal_id").datepicker({
onSelect: function(date,inst){
//This is the important line.
//Setting this to false prevents the redraw.
inst.inline = false;
//The remainder of the function simply preserves the
//highlighting functionality without completely redrawing.
//This removes any existing selection styling.
$(".ui-datepicker-calendar .ui-datepicker-current-day").removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active");
//This finds the selected link and styles it accordingly.
//You can probably change the selectors,depending on your layout.
$(".ui-datepicker-calendar TBODY A").each(function(){
if ($(this).text() == inst.selectedDay) {
$(this).addClass("ui-state-active");
$(this).parent().addClass("ui-datepicker-current-day");
}
});
}
});