处理 jQueryUI Datepicker for Bootstrap 下拉菜单的点击事件

Posted 2023-05-08

【中文标题】处理 jQueryUI Datepicker for Bootstrap 下拉菜单的点击事件

【英文标题】：Handle on click event of jQueryUI Datepicker for Bootstrap drop-down menu

【发布时间】：2014-09-02 04:44:27

【问题描述】：

我有一个 Bootstrap 下拉菜单。因为我有一个用于选择日期的字段。我已停止下拉菜单事件的事件传播。

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

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/

【参考方案1】：

这很简单。你只需stopPropagation#ui-datepicker-div

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

【讨论】：

是的，它确实适用于小提琴。不知何故无法使用我创建的角度指令。

你能以某种方式发布它吗？在任何主机上？

【参考方案2】：

如果你创建了一个角度指令，你可以在你的链接函数里面做这个指令来解决问题。

// Stop event bubbling in case click is on date picker div....
var widg = $( element ).datepicker("widget");
widg.click(function(e)
  e.stopPropagation();
);