Bootstrap日期时间选择器定位

Question

我在代码中添加了日期时间选择器插件，它可以工作，但是位置不正确。当我在输入框上聚焦时，它显示在页面的页脚而不是靠近输入框。我应该检查什么？

 $(".form-date").datetimepicker({
   format: "dd.mm.yyyy",
   minView: 2,
   maxView: 4,
   autoclose: true,
   language: 'tr',
   pickerPosition: "bottom-left"
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="form-group row">
  <label for="Tarih" class="col-md-3 control-label">Tarih</label>
  <div class="col-md-9 input-append date form-date">
    <input type="text" class="form-control" name="Tarih" id="Tarih" value="" placeholder="Tarih">
    <span class="add-on"><i class="icon-th"></i></span>
  </div>
</div>

- Serhat Koroglu

---

请尝试这个 - https://jsfiddle.net/3L4gc6fy/1/ - Anil Singh

您需要一个选项widgetPositioning或访问链接：https://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning - Md. Abu Sayed

Answer 1

除了在您的共享片段中缺少一些必需的资源（datetimepicker，moment等），您还使用了已弃用的选项，这些选项会阻止日期选择器显示。

您可以在此处找到当前选项。 所需资源列表。 更新如下：

• format: 'dd.MM.YYYY'
• min和maxView已经被删除，但是您可以在选项链接中检查viewMode（没有最小-最大选项）。
• autoclose更改为keepOpen（默认情况下设置为false，因此不需要）
• language更改为locale: 'tr'
• pickerPosition更改为widgetPositioning {horizontal: 'left', vertical: 'bottom'}对象。

有效代码片段：

$('.form-date').datetimepicker({
  format: 'dd.MM.YYYY',
  locale: 'tr',
  widgetPositioning: {
    horizontal: 'left',
    vertical: 'bottom'
  }
});

<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<div class="container">
  <div class="form-group row">
    <label for="Tarih" class="col-md-3 control-label">Tarih</label>
    <div class='input-group date form-date col-md-9 input-append'>
      <input type='text' class="form-control" placeholder="Tarih" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

- Syden

Answer 2

Bootstrap Datetime Picker 没有提供旧版本选项。但您可以通过对下拉选择器应用 CSS 来更改其定位。

.bootstrap-datetimepicker-widget.dropdown-menu {
    inset: auto!important;
}

这是更详细的文档： https://bootstrap-datepicker.readthedocs.io/

- CodingEra

Answer 3

我认为Bootstrap Datetime Picker没有“pickerPosition:“bottom-left””选项。

http://eonasdan.github.io/bootstrap-datetimepicker/Options/

可能它正引起了问题。

- Asim K T

---

没事的：http://www.malot.fr/bootstrap-datetimepicker/demo.php?utm_source=siteweb&utm_medium=demo&utm_campaign=Site%2BWeb#demo_position - Serhat Koroglu

Answer 4

你的 HTML 引用代码中没有 datetimepicker 组件文件。你应该添加 JS 和 CSS 文件。

首先从 组件网站 下载脚本，或者从 Git 克隆：

$ git clone git://github.com/smalot/bootstrap-datetimepicker.git

并在头部添加参考：

来源：

<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>

HTML：

<div class="form-group">
            <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
            <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                <input class="form-control" size="16" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
            <input type="hidden" id="dtp_input2" value="" /><br/>
        </div>

- Deniz Öztürk