When I change the date in the picker then the picker is getting hidden, How can skip this behavior in kendo ui datePicker
Asked
Active
Viewed 4,824 times
3 Answers
4
You can replace the change method for the date picker's DateView so that it doesn't close the popup:
var datePicker = $("#sampleDate").kendoDatePicker({}).getKendoDatePicker();
datePicker.dateView.options.change = function () {
datePicker._change(this.value());
};
(demo)

Lars Höppner
- 18,252
- 2
- 45
- 73
-
nice solution, don't really know how it works haha. Any idea of how it can be done with a regular `@(Html.Kendo().DatePicker()`? – CSharper Jun 24 '14 at 23:35
-
@CSharper you can only change those internals with JS; the problem is that you don't know when the Kendo controls have finished loading (at least I'm not aware if there's a way) so you can change the widget; I guess you could use the date picker's open event and change this.dateView.options.change in the same way whenever the picker is opened – Lars Höppner Jun 25 '14 at 01:00
-
@CSharper actually, you can use the same code, just put it in a jQuery ready block and place that after the code that initializes your date picker – Lars Höppner Jun 25 '14 at 22:37
2
Simply do e.preventDefault()
on the close event.
$("#datepicker").kendoDatePicker({
close: function(e) {
e.preventDefault(); //prevent popup closing
}
});
However, you will no longer be able to close the datepicker in any way, so make sure you prevent default only when you want to keep the datepicker open.
e.g
close: function(e) {
if(keepOpen === true){
e.preventDefault();
}
}

gitsitgo
- 6,589
- 3
- 33
- 45
0
Try to capture the change event of the datePicker
$("#datepicker").kendoDatePicker()
.Events(e =>
{
e.Change("JSFunction");
})
function JSFunction() {
var datepicker = $("#datePickerId").data("kendoDatePicker");
datepicker.open();
}

CSharper
- 5,420
- 6
- 28
- 54
-
Yes I have tried the above, but it still closing the the picker once user changes the date. – 3nath Jun 24 '14 at 13:40