twitter-bootstrap Bootstrap 日期时间选择器定位

Bootstrap datetime picker positioning

提问by Serhat Koroglu

I added datetime picker plugin in my code. It works but not positioning rightly. When I focused on the input it's showed in footer of page not near the input. What should I check for?

我在代码中添加了日期时间选择器插件。它有效但定位不正确。当我专注于输入时，它显示在页面的页脚中，而不是靠近输入。我应该检查什么？

 $(".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>

回答by Asim K T

I think there is no 'pickerPosition: "bottom-left"' option for Bootstrap Datetime Picker.

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

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

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

May be it is causing the problems.

可能是它导致了问题。

回答by Deniz

There is no datetimepicker component files in your html reference codes. You should have added js and css files.

您的 html 参考代码中没有 datetimepicker 组件文件。您应该已经添加了 js 和 css 文件。

First download the scripts from the component websitehere or clone from git:

首先从这里的组件网站下载脚本或从 git 克隆：

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

And add references in the head section:

并在 head 部分添加引用：

Sources:

资料来源：

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

HTML:

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>

回答by Syden

Aside from missing some of the required assets (datetimepicker, moment, etc) in your shared snippet, you are using deprecated options which prevent datepicker from displaying.

除了在共享代码段中缺少一些必需的资产（datetimepicker、moment 等）之外，您还使用了已弃用的选项，这些选项会阻止 datepicker 显示。

You can find current options here.

您可以在此处找到当前选项。

List of required assets here.

此处列出所需资产。

Update to the following:

更新以下内容：

• format: 'dd.MM.YYYY'
• min& maxVieware gone but you can check viewModeon the options link (no min-max option though).
• autocloseto keepOpen(although it's set to falseby default, so no need)
• languageto locale: 'tr'
• pickerPositionto widgetPositioning {horizontal: 'left', vertical: 'bottom'}object.

• format: 'dd.MM.YYYY'
• min&maxView消失了，但您可以查看viewMode选项链接（尽管没有最小-最大选项）。
• autocloseto keepOpen（虽然它false默认设置为，所以不需要）
• language到 locale: 'tr'
• pickerPosition到widgetPositioning {horizontal: 'left', vertical: 'bottom'}对象。

Working Snippet:

工作片段：

$('.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>