I use kendo datepicker, and I added a text area at the bottom of the pop-up calendar so that users can add comments when the date changes. I have a comment pane showing when the date picker is displayed, but when I click on the text box to enter comments, the calendar closes. I am trying to use e.preventDefault () in a datepicker close event, but then it never closes.
Is there a way to prevent the dumping kendo calendar from closing when I click on a well-known container that is outside the datepicker?
the code:
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 for position under 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
<div id='datePicker' style='visibility: hidden; position: absolute;'></div>
Kendo js
$("#datePicker").kendoDatePicker({
close: function() {
$('.date-comment-wrapper').hide();
},
animation: false
});