Question

请在澄清问题时发表评论。我怀疑这个问题措辞不够，但它很复杂，所以要问一个棘手的问题。

我目前在bootstrap导航栏上有一个dropup，我已经转换为工具栏。我已经将2个bootstrap datepickers移动到dropup中以选择范围。

enter image description here

问题是，一旦我选择了一个日期选择器输入的日期，就会关闭该连接。我希望它保持打开状态，直到单击“确定”按钮或我单击“放置”。

如果你没有它们，这里是BOOTSTRAP DOCS 关闭下拉列表的行是clearMenus（）函数中bootstrap.js的第798行：

$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)

我一直在学习Javascript，但这个问题已经过去了。

前端

...
<div class="dropup mobilewidth mobilebottom">
  <button class="btn btn-default dropdown-toggle mobilewidth" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Date Range
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu datepicWidth" aria-labelledby="dropdownMenu2">
    <div class="dpInputs">
      <div class="input-group" style="padding-bottom: 4px;">
        <span class="input-group-addon datepic1stChld">From:</span>
        <input class="datepicker dp1 datepic2ndChld" readonly="true" name="startDate">
      </div>        
      <div class="input-group">
        <span class="input-group-addon datepic1stChld">To: </span>
        <input class="datepicker dp2 datepic2ndChld" readonly="true" name="endDate">
      </div>
    </div>
    <div class="dpSubmit">
      <button type="submit" id="dpSubmitBtn">OK</button>
    </div>
    </ul>
  </div>
</div>
...

我的css

.navbar {
  border-radius: 0px;
}

.dropup{
    display: inline-block;
}

.dropdown-menu {
    padding: 4px 4px 4px 4px;
    min-width: 30px;
}
.navbar-default2 {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
  position: fixed;
  bottom: 0px;
  width: 100%;
  margin-bottom: 0px;
  vertical-align: middle;
}
.navbar-default2 .navbar-brand {
  color: #777;
}
.navbar-default2 .navbar-toggle:hover,
.navbar-default2 .navbar-toggle:focus {
  background-color: #ddd;
}
.navbar-default2 .navbar-toggle {
  border-color: #ddd;
}
.navbar-default2 .navbar-toggle .icon-bar {
  background-color: #888;
}

@media (min-width: 768px) {
  .navbar-footer {
    float: left;
  }
}
.container > .navbar-footer,
.container-fluid > .navbar-footer,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
  margin-right: -15px;
  margin-left: -15px;
}
@media (min-width: 768px) {
  .container > .navbar-footer,
  .container-fluid > .navbar-footer,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}

 .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-footer {
    padding: 5px 15px 5px 25px;
  }

button {
    margin-top: 8px;
}
.onlyMobile {
  display: none;
}
.datepic1stChld{
  width: 63px;
}
.datepic2ndChld{
  width: 100%;
  border-radius: 0px;
  border: 1px solid #ccc;
}

.datepicWidth {
  width: 280px;
  left: -165px;
}
.dpInputs{
  width: 200px;
  float: left;
}
.dpSubmit{
  width: 68px;
  float: left;
}
#dpSubmitBtn{
  margin: 0px 2px 2px 3px;
  width: 100%;
  height: 64px;
  border: 1px solid #ccc;
  background-color: #eee;
}
@media (max-width: 767px) {
  .btn-default{
    font-size: 17px;
  }
  .three{
    width: 33.333333333%;
  }
  .mobilewidth{
    width: 100%;
  }
  .onlyMobile{
    display: block;
  }
  .mobilebottom {
    padding-bottom: 8px;
  }
  .WM3MY{
    width: 16.75%;
  }
  .fullwidth{
    width: 100%;
    font-size: 18px;
  }
  .input-group{
      width: 100%;
  }
  .datepicWidth {
    width: 100%;
    left: 0px;
  }
  .dpInputs{
     width: 73%
  }
  .dpSubmit{
      width: 26%;
  }
  #dpSubmitBtn{
    font-size: 18px;
    height: 74px;
    border-radius: 1px;
  }
  .datepic1stChld{
    width: 72px;
  }
  .datepic2ndChld{
    font-size: 18px;
  }
  .input-group-addon{
     font-size: 18px;
  }

}

.navbar-collapse.in {
    overflow-y: visible;
}

我认为你不需要它们，但这里是DATEPICKER DOCS

Answer 1

而不是编写一些javascript或jquery代码（重新发明轮子）。上述方案可以通过bootstrap自动关闭选项进行管理。您可以为自动关闭：

提供任一值

always - （默认）会在点击任何元素时自动关闭下拉列表。
outsideClick - 仅在用户点击下拉列表外的任何元素时自动关闭下拉列表。
已停用 - 禁用自动关闭

看看下面的plunkr：

http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview

集

uib-dropdown auto-close="disabled"

希望这会有所帮助：）

Answer 2

我认为如果你覆盖datepicker的“changeDate”事件并阻止其默认行为，它应该可以工作。

$("#myCal").on('changeDate', function(ev)
{
    ev.preventDefault();
});

您需要使用适合日历的选择器更改“#myCal”。

防止Bootstrap下拉崩溃直到单击按钮

2 个答案: