阻止Datepicker关闭父下拉列表

Question

我正在使用bootstrap来开发一个网站,我需要一个表格在我的顶级导航中的下拉列表中.

这工作正常,但我还必须在其中一个字段中使用日期选择器,当用户选择不同的月份时,父下拉菜单关闭.

我喜欢它,以便你可以点击日期选择器内的任何地方而不关闭下拉列表.

或者,可以更改下拉列表,使其仅在单击导航链接时打开和关闭,而不是在单击任何位置时关闭.

jsfiddle在这里 - http://jsfiddle.net/ackuu/

谢谢你的帮助!!

HTML

<div class="navbar txt-grey" role="navigation">
    <div class="navbar-header">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Dropdown</b><b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <form method="POST" class="form">
                        <div class="field clear">
                                Date                                    
                        <input type="text" name="p_start_date" id="datepicker" class="input datepicker" placeholder="Select date" />
                         </div>
                        <button type="submit" name="res_submit">Go</button>      
                    </form>
                </ul>
            </li>
        </ul>
    </div>
</div>

JS

$().ready(function(){
    $(".datepicker").datepicker({
        dateFormat      : 'dd-mm-yy',
        firstDay        : 1, 
        minDate         : 1,
        showOtherMonths     : true,
        selectOtherMonths   : true
    });
});

Answer 1

您必须简单地防止.datapicker的 click 事件在 DOM 树中冒泡：

$().ready(function(){
    $(".datepicker").datepicker({
        dateFormat          : 'dd-mm-yy',
        firstDay            : 1,            // sets first day of the week to Monday
        minDate             : 1,            // sets first available date in calendar to tomorrow's date
        showOtherMonths     : true,         // displays days at beginning or end of adjacent months
        selectOtherMonths   : true
    }).click(function(e) {
       e.stopPropagation(); // <--- here
    });
});

分叉小提琴 -> http://jsfiddle.net/VC288/