我正在使用 kendo datepicker,我在弹出式日历的底部添加了一个文本区域,供用户在更改日期时添加评论。我在日期选择器显示时显示评论区域,但是当我单击文本区域输入评论时,日历关闭。 我尝试在日期选择器的关闭事件上使用 e.preventDefault() 但它永远不会关闭。
有什么方法可以防止在单击日期选择器之外的已知容器时关闭 kendo 日期选择器日历弹出窗口?
代码:
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>
剑道 Js
$("#datePicker").kendoDatePicker({
close: function() {
// Close the comment div
$('.date-comment-wrapper').hide();
},
animation: false
});
最佳答案
我猜这个问题是因为你的 div.date-comment-wrapper
包含 textarea
和 button
在弹出窗口之外(其代码未显示)并且与 #datePicker
完全无关。
如果您将 div.date-comment-wrapper
附加到弹出窗口,则当您单击提交按钮时该窗口不应关闭。
关于javascript - 单击日期选择器外部的已知容器时,有没有一种方法可以防止剑道日期选择器日历弹出窗口关闭?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24187054/