Question

我正在使用bootstrap来开发一个网站，我需要在我的顶级导航中的下拉列表中找到一个表单。

这很好但我还必须在其中一个字段中使用日期选择器，当用户选择其他月份时，父下拉菜单会关闭。

我希望你能点击日期选择器内的任何地方而不关闭下拉列表。

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

jsfiddle here - 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

以下代码适用于我。

$().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() {
    $('#ui-datepicker-div').click(function(e){
       e.stopPropagation();
    });
  });
});

Answer 2

您必须简单地阻止{DOM}树中的.datapicker点击事件冒泡：

$().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
    });
});

分叉小提琴 - ＆gt;的 http://jsfiddle.net/VC288/

Answer 3

我知道这是一个老问题，但开发人员已经实现了一个调试功能来完成这个

summarise

阻止Datepicker关闭父下拉列表

3 个答案: