Kendo DatePicker Header

Question

I'm trying to replace the DatePicker's header with two comboboxes - one for month, one for year. After the DatePicker is created (I'm using MVC helpers), I can successfully manually insert a ComboBox into the DOM with basic javascript. All good. The problem is when I open the DatePicker, then expand the ComboBox, the DatePicker closes. Presumably because it thinks it lost focus?

Any thoughts?

Edit:

I've tried both DatePicker and a regular Calendar with manual hiding/showing when the enclosing div loses/gains focus. Both solutions close when trying to use the dropdown. I have also tried both a Kendo ComboBox and a vanilla HTML <select> element.

Calendar and <select> example below. The issue should be reproducible without kendo...Just hide/show a div when a parent div changes focus.

$(document).on("ready", function () {
            $("#calendar-background").hide();
            $("#datepicker").focusout(function () { $("#calendar-background").hide(); });
            $("#datepicker").focusin(function () { $("#calendar-background").show();});

            var div = $("#calendar .k-header");
            div.html("<select id='monthDD3'>"+
                "<option value='1'>January</option>" +
                "<option value='2'>February</option>" +
                "<option value='3'>March</option>" +
                "<option value='4'>April</option>" +
                "<option value='5'>May</option>" +
                "<option value='6'>June</option>" +
                "<option value='7'>July</option>" +
                "<option value='8'>August</option>" +
                "<option value='9'>September</option>" +
                "<option value='10'>October</option>" +
                "<option value='11'>November</option>" +
                "<option value='12'>December</option>" +
                "</select>");
});

            <div id="calendar-outer" class="k-widget k-datepicker k-header" style="width: 150px;">
            <span class="k-picker-wrap k-state-default">
                <input aria-readonly="false" aria-disabled="false" aria-owns="datepicker_dateview" aria-expanded="false" role="combobox" class="k-input" data-role="datepicker" id="datepicker" name="datepicker" style="width: 100%;" value="10/10/2011" type="text">
                <span aria-controls="datepicker_dateview" role="button" unselectable="on" class="k-select">
                <span unselectable="on" class="k-icon k-i-calendar">select</span></span></span>
                <div id="calendar-background" style="display:inline;position: absolute;z-index:99999">
                    @(Html.Kendo().Calendar()
            .Name("calendar")
                    )
                </div>
            </div>

Could you please share your code? – Jayesh Goyani Aug 21 '15 at 15:41 — Jayesh Goyani, Aug 21 '15 at 15:41

score 0 · Accepted Answer · edited May 23 '17 at 10:26

Instead of using focusout, I needed to manually check if the user clicked on any descendant elements, as seen here: Use jQuery to hide a DIV when the user clicks outside of it.

    $(document).mouseup(function (e)
    {
        var container = $("#calendar-outer");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $("#calendar-background").hide();
        }
    });

Kendo DatePicker Header

1 Answers1