我正在使用剑道日期选择器,并在弹出日历的底部添加了一个文本区域,供用户在更改日期时添加评论。我有显示日期选择器何时显示的评论区域,但是当我单击文本区域输入评论时,日历关闭。我尝试在 datepicker 的关闭事件上使用 e.preventDefault() 但它永远不会关闭。
单击日期选择器外部的已知容器时,有没有办法可以防止剑道日期选择器日历弹出窗口关闭?
代码:
html:
<div class="date-comment-wrapper">
<textarea id="date-comment" cols="30" rows="5"></textarea>
<button class="pull-right" id="date-change-submit">Submit Change</button>
</div>
CSS:
.date-comment-wrapper {
padding: 10px;
border: 1px solid #c5c5c5;
width: 225px;
position: absolute;
top: 0px;
left: 0px;
display:none;
background-color: white;
border-radius: 0 0 4px 4px;
}
放置在日期选择器下的 Javascript:
var commentDiv = $('.date-comment-wrapper'),
paddingPlusBorder = 22,
calendarTopElement = $('.k-animation-container'),
width = parseFloat(calendarTopElement.css('width')) - paddingPlusBorder,
height = parseFloat(calendarTopElement.css('height')),
textArea = commentDiv.children('#date-comment'),
top = parseFloat(calendarTopElement.css('top')),
left = parseFloat(calendarTopElement.css('left'));
commentDiv.css({
width: width,
left: left,
top: top + height
});
textArea.css({
width: width - paddingPlusBorder
});
commentDiv.show();
剑道 HTML
<div id='datePicker' style='visibility: hidden; position: absolute;'></div>
剑道
$("#datePicker").kendoDatePicker({
close: function() {
// Close the comment div
$('.date-comment-wrapper').hide();
},
animation: false
});