Question

我使用以下代码并且它无法正常工作，我想使用bootstrap，我做错了什么？

我尝试添加许多内容但没有任何成功....我添加了部分脚本后，控制台中没有任何错误......

<div class="form-group">

    @Html.LabelFor(model => model.FromDate, new { @class = "col-sm-2 control-label" })
    <div class='col-sm-4'>
        <input type='text' class="form-control" id='datetimepicker4' />   
        <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar">
            </i>
        </span>
    </div>



    @section scripts {

        <script type="text/javascript">


            $(function () {
                $('#datetimepicker4').datetimepicker({
                    pickTime: false
                });
            });
        </script>

    }

Answer 1

不要忘记包含来源，例如

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

然后只需使用以下脚本输入指定的id：

    <script>
      $(function() {
        $( "#datetimepicker4" ).datepicker();
     });
    </script>

Answer 2

根据doc。你需要这些行作为首字母。

<head>
  <!-- ... -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/moment.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
</head>

Answer 3

我想，您正在使用此链接中的日期和时间选择器：http://eonasdan.github.io/bootstrap-datetimepicker/

为此你需要这个脚本

<script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/moment.js"></script>
<script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap-datetimepicker.js"></script>

然后你的代码就可以了..

Answer 4

这是一个带有BS3的DatetimePicker - 没有“时间”。请看一下以及如下工作演示。

<div class="container well">
    DatetimePicker example#1 from <a href="http://eonasdan.github.io/bootstrap-datetimepicker/">eonasdan</a>
    <div class="row">
        <div class='col-sm-3'>
            <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>

<强>脚本

$(function () {
    $('#datetimepicker1').datetimepicker({
        pickTime: false
    });
});

DEMO HERE

引导程序的日期选择器不起作用

4 个答案: