javascript – 有没有办法可以防止在点击日期选择器之外的已知容器时关闭kendo datepicker日历弹出窗口？

我正在使用kendo datepicker,我在弹出日历的底部添加了一个textarea,供用户在更改日期时添加注释.我有注释区域显示datepicker显示,但当我点击textarea输入注释时,日历关闭.
我试图在datepicker的close事件上使用e.preventDefault()但它永远不会关闭.

有没有办法可以防止在点击日期选择器之外的已知容器时关闭kendo datepicker日历弹出窗口？

码：

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在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();

剑道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
});

解决方法

我猜这个问题是因为包含textarea和按钮的div.date-comment-wrapper在弹出窗口之外(其代码未显示)并且与#datePicker完全无关.

如果将div.date-comment-wrapper附加到弹出窗口,则单击提交按钮时窗口不应关闭.