[英]Is there a way I can prevent a kendo datepicker calendar pop-up from closing when clicking on a known container which is outside of the datepicker?
I'm using the kendo datepicker and I have added a textarea at the bottom of the pop-up calendar for users to add comments when changing a date. 我正在使用kendo datepicker,我在弹出日历的底部添加了一个textarea,供用户在更改日期时添加注释。 I have the comments area showing when the datepicker shows but when I click on the textarea to enter comments, the calendar closes. 我有注释区域显示datepicker显示,但当我点击textarea输入注释时,日历关闭。 I have try to use e.preventDefault() on the close event of the datepicker but then it never closes. 我试图在datepicker的close事件上使用e.preventDefault()但它永远不会关闭。
Is there a way I can prevent a kendo datepicker calendar pop-up from closing when clicking on a known container which is outside of the datepicker? 有没有办法可以防止在点击日期选择器之外的已知容器时关闭kendo datepicker日历弹出窗口?
Code: 码:
Html: 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: 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 to position under datepicker: Javascript在datepicker下的位置:
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();
Kendo Html 剑道Html
<div id='datePicker' style='visibility: hidden; position: absolute;'></div>
Kendo Js 剑道Js
$("#datePicker").kendoDatePicker({
close: function() {
// Close the comment div
$('.date-comment-wrapper').hide();
},
animation: false
});
I am guessing the problem is because your div.date-comment-wrapper
containing the textarea
and button
is outside of the popup (whose code is not shown) and is completely unrelated to the #datePicker
. 我猜测问题是因为包含textarea
和button
div.date-comment-wrapper
在弹出窗口之外(其代码未显示)并且与#datePicker
完全无关。
If you append the div.date-comment-wrapper
to your popup window, the window should not close when you click your submit button. 如果将div.date-comment-wrapper
附加到弹出窗口,则单击提交按钮时窗口不应关闭。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.