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>

Answer 1

我認為 Bootstrap Datetime Picker 沒有 'pickerPosition: "bottom-left"' 選項。

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

可能是它導致了問題。

Answer 2

您的 html 參考代碼中沒有 datetimepicker 組件文件。 您應該已經添加了 js 和 css 文件。

首先從這里的組件網站下載腳本或從 git 克隆：

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

並在 head 部分添加引用：

資料來源：

<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>

Answer 3

除了在共享代碼段中缺少一些必需的資產（datetimepicker、moment 等）之外，您還使用了已棄用的選項，這些選項會阻止 datepicker 顯示。

您可以在此處找到當前選項。

此處列出所需資產。

更新以下內容：

• format: 'dd.MM.YYYY'
• min & maxView不見了，但您可以在選項鏈接上檢查viewMode （雖然沒有 min-max 選項）。
• autoclose to 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>

Answer 4

舊版本的 Bootstrap 日期時間選擇器沒有選項。 但是您可以通過將CSS應用於下拉選擇器來更改定位。

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

這是更多詳細信息的文檔： https : //bootstrap-datepicker.readthedocs.io/