Kendo 日期选择器 Header

Question

我正在尝试用两个组合框替换 DatePicker 的 header - 一个用于月，一个用于年。创建 DatePicker 后（我正在使用 MVC 助手），我可以使用基本的 javascript 成功地将 ComboBox 手动插入到 DOM 中。都好。问题是当我打开 DatePicker，然后展开 ComboBox 时，DatePicker 关闭。大概是因为它认为它失去了焦点？

有什么想法吗？

编辑：

我已经尝试过 DatePicker 和带有手动 hiding/showing 的常规日历，当封闭 div loses/gains 焦点时。尝试使用下拉菜单时，两种解决方案都会关闭。我还尝试了 Kendo ComboBox 和香草 HTML 下面的示例。该问题应该可以在没有 kendo 的情况下重现...当 parent div 改变焦点时只需 hide/show 一个 div。

$(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>

Answer 1

我没有使用 focusout，而是需要手动检查用户是否点击了任何后代元素，如下所示：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 日期选择器 Header

Kendo DatePicker Header

jquery

combobox

datepicker

kendo-ui

kendo-asp.net-mvc