处理用于Bootstrap下拉菜单的jQueryUI Datepicker的click事件

Question

我有一个Bootstrap下拉菜单.我有一个选择日期的字段.我已停止下拉菜单事件的事件传播.

当我选择日期时,在下拉菜单中的输入字段中选择相应的日期.在此活动中,菜单的状态也保持打开状态.当我从该datepicker控件更改月份和年份时,下拉菜单消失.在这种特殊情况下,我如何处理日期选择器控件的点击事件.

HTML代码:

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#"
       data-toggle="dropdown" data-target="#" 
       class="btn btn-primary">
        Dropdown <span class="caret"></span>
    </button>

    <!-- Dropdown Menu -->
    <ul id="abc" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><input type="text" id="date" name="date" ng-model="date"/>
        </li>
    </ul>
</div>

使用Javascript:

$(function(){
    $("#date").datepicker({ changeMonth: true,
                changeYear: true,});
});

$("#abc").click(function (event) {
        event.stopPropagation();
});

你可以在这里看到实际的问题:http: //jsfiddle.net/ajinkya34/PWN8h/

Answer 1

这很简单.你只是stopPropagation在#ui-datepicker-div

$("#abc, #ui-datepicker-div").click(function (event) {
    event.stopPropagation();
});