防止日期选择器关闭父级下拉菜单

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
    });
});

- user3090803

---

DateTimepicker已更新带有调试功能。请参见下面的回答。 - paullb

Answer 1

您只需阻止 .datapicker 的点击事件在 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
    });
});

分支jsfiddle -> http://jsfiddle.net/VC288/

- davidkonrad

Answer 2

下面的代码对我有效。

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

- HariHarasudhan

Answer 3

我知道这是一个老问题，但开发者已经实现了一个调试功能来做到这一点

$().ready(function(){
    $(".datepicker").datepicker({
        debug:true;
  });     
});

- paullb

Answer 4

如果有人在使用jQuery的“daterangepicker”，这个方法对我有效。

$('#your-daterangepicker-div-id').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  }).click(function(e) {
    $("div.daterangepicker").click( function(e) {
      e.stopPropagation();
    });
  });

- Jin Lim