Bootstrap Datetimepicker - 更改弹出框位置答案

【问题标题】：Bootstrap Datetimepicker - Change Popover PositionBootstrap Datetimepicker - 更改弹出框位置
【发布时间】：2013-06-25 09:06:36
【问题描述】：

我正在使用以下 Bootstrap 插件，并且基本上想更改包含日历/时间选择器的弹出框的位置，以显示在附加按钮的左侧，而不是插件演示中的右侧。

http://tarruda.github.io/bootstrap-datetimepicker/

我仍然需要右侧的附加按钮，但需要弹出框显示在左侧，在输入字段下方。

【问题讨论】：

标签： twitter-bootstrap datepicker datetimepicker

【解决方案1】：

我认为是这样的：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <input id="simpleInput" type="text" class="span3 datepicker" />
            <div class="control-group">
                <label class="control-label" for="dateTest">New Date:</label>
                <div class="controls">
                    <div class="input-append date datepicker">
                        <input id="compInput" class="span6" type="text" /> <span class="add-on"><i class="icon-th"></i></span>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

使用

#target {
    margin: 2em;
}

Live DEMO

【讨论】：

【解决方案2】：

你可以通过添加改变Datetimepicker向左的位置

pickerPosition: "bottom-left"

试试这样的：

$(function() {
    $('#your_date_time_picker').datetimepicker({
      language: 'en',
      pickerPosition: "bottom-left"
    });
  });

其他定位选项有：

pickerPosition: "bottom-left"
pickerPosition: "top-left"
pickerPosition: "top-right"

【讨论】：