Is there a way to prevent the kendo datepicker popup from appearing when I click on a known container that is outside the datepicker?

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() {    
        // Close the comment div
        $('.date-comment-wrapper').hide();
    },
    animation: false
});
+4
1

, , div.date-comment-wrapper, textarea button, ( ) #datePicker.

div.date-comment-wrapper , .

+1

Source: https://habr.com/ru/post/1544347/


All Articles