Bootstrap datetimepicker不起作用

Question

你好，我的datetimepicker不能正常工作，我也不知道原因。 有人可以幫我這個嗎？

這是鏈接

<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

這里是它在form的代碼，但我認為不需要把它放在這里

<div class='input-group date' id='datetimepicker1'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>

這是我的腳本

<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">

 $(function () {
                $('#datetimepicker1').datetimepicker();
            });
    </script>

這是輸出

我的css文件夾

我的js文件夾

Answer 1

首先，要顯示日期選擇器，您需要在input上調用該函數。

$('#datetimepicker1 input').datetimepicker()

另外，請包含要顯示的字形相關的css文件

Answer 2

也許嘗試Bootstrap 3無法正確顯示glyphicon圖標不顯示。 對我來說，它通過再次獲取字體文件來解決，如用戶體驗的答案中所述

Answer 3

輸入必須有id ='datetimepicker1' ，而不是div。

Answer 4

我的猜測是你在網站上加載HTML元素之前運行了javascript。

在此示例中，請注意腳本位於javascript使用的div之后。

<div class="container">
    <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" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <!-- AFTER the datetimerpicker is loaded -->

        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

如果它來過，像這樣：

<script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
</script>



<div class="container">
    <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" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>

    </div>
</div>

javascript將在div加載之前運行，因此它不會找到id＃datetimepicker1。 從頭部取出javascript，然后在datetimepicker之后粘貼它。

Answer 5

看起來你不見了

data-provide="datepicker"

按照說明@ https://bootstrap-datepicker.readthedocs.io/en/latest/

您是否有理由使用<span></span>而不是<div></div>

例如代碼是

<div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div>

還有開發人員控制台中的任何錯誤？

Answer 6

本網站最好地使用Bootstrap 3日期和時間選擇器

這是鏈接http://eonasdan.github.io/bootstrap-datetimepicker/

我也在github上為你做了一個例子，祝你好運。

這是鏈接https://github.com/elsayhsoft/Bootstrap-date-time-picker

最好的祝福。