在 Bootstrap 内部时，Bootstrap datetimepicker 不会触发

Question

我正在尝试将引导程序 datetimerpicker 放在引导程序折叠内，但是当我单击字形图标时，日历不会下拉。我假设有一些 javascript 冲突阻止了用户可以选择日期的日历下拉列表。

代码如下：

        <div class="col-sm-3 sidebar">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">Request Pickup</h4>
                </div>
              </a>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                <h4>Selected A Date</h4>
                    <div class="row">
                        <div class='col-sm-6'>
                            <div class="form-group">
                                <div class='input-group date' id='datetimepicker1'>
                                    <input type='text' class="form-control" id="delivery_time" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#datetimepicker1').datetimepicker({
                                  format: "dd MM yyyy - HH:ii P",
                                  showMeridian: true,
                                  autoclose: true,
                                  todayBtn: false
                                });
                            });
                        </script>
                    </div>
              </div>
            </div>
          </div>
        </div>
    </div>

我正在使用带有这个gem 的rails，它在不崩溃时可以完美运行。非常感谢任何帮助或批评。谢谢

Answer 1

看起来您提供的链接不正确，或者可能引用了不正确的文档；因为您使用的大多数选项都不是相关日期时间选择器的一部分http://eonasdan.github.io/bootstrap-datetimepicker/Options/

很难判断您尝试使用什么格式作为日期，因为您没有使用有效的时刻格式http://momentjs.com/docs/#/displaying/format/

您可能还需要添加一些自定义 CSS 以允许在 Bootstrap 面板上显示overflow: visible;。

如果我们讨论的是正确的日期时间选择器，这样的事情应该可以帮助您。您将不得不使用时刻格式来满足您的需求。

见小提琴：http://jsfiddle.net/spasticdonkey/6g7j55f2/3/

$(function () {
    $("#datetimepicker1").datetimepicker({
        format: "DD MM YYYY - HH:mm Z",
        useCurrent: false
    });
});