Bootstrap-Datetimepicker 不工作答案

【问题标题】：Bootstrap-Datetimepicker Not workingBootstrap-Datetimepicker 不工作
【发布时间】：2014-04-03 18:57:10
【问题描述】：

我已经看了 2 天了，无法弄清楚我做错了什么。

这是我的项目的一个小提琴。 http://jsfiddle.net/dagger2002/RR4hw/

这里是 HTML

    <div class="container">
    <div class="col-sm-6" style="height:75px;">
        <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

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

这里是 Jquery。

jQuery(function () {
    jQuery('#startDate').datetimepicker();
    jQuery('#endDate').datetimepicker();
    jQuery("#startDate").on("dp.change",function (e) {
        jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
    });
    jQuery("#endDate").on("dp.change",function (e) {
        jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
    });
});

我没有收到任何错误，当我通过 fiddle 运行它时，它说没有发现错误。我是 jQuery 新手，所以我不确定我做错了什么。

哦，是的。我正在使用长名称进入一个也使用 moo 工具的 joomla 网站。

提前致谢。

更新

<!doctype html>

<html lang="en-gb">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="x-ua-compatible" content="IE=edge,chrome=1" />
        <title>DateTime Test</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />


        <!-- Style Sheets -->
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" type="text/css" />
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" />

        <!-- Scripts -->
        <script src="//ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
        <script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>

        <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js" type="text/javascript"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>  
        <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js" type="text/javascript"></script>
        <script>
            jQuery.noConflict();
        // Code that uses other library's $ can follow here.
        </script>
    </head>

    <body>
        <div class="container">
            <div class="col-sm-6" style="height:75px;">
               <div class='col-md-5'>
                    <div class="form-group">
                        <div>Start</div>

                        <div class='input-group date' id='startDate'>
                            <input type='text' class="form-control" name="startDate" />
                            <span class="input-group-addon">
                                   <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class='col-md-5'>
                    <div class="form-group">
                        <div>End</div>

                        <div class='input-group date' id='endDate'>
                            <input type='text' class="form-control" name="org_endDate" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

这个 jFiddle 有效。 http://jsfiddle.net/RR4hw/11/

但是当我将它合并到常规页面时它会中断。不知道我在搞砸什么。

提前致谢。

【问题讨论】：

标签： jquery twitter-bootstrap-3 bootstrap-datetimepicker

【解决方案1】：

您的 jsFiddle 中的外部资源似乎存在一些问题。

我已更新jsFiddle 工作。我更改了外部资源并对代码进行了一些小调整。

HTML

<div class="container">
    <div class="col-sm-6" style="height:75px;">
       <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

                <div class='input-group date' id='endDate'>
                    <input type='text' class="form-control" name="org_endDate" />
                    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT

jQuery(function () {
    jQuery('#startDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
    jQuery('#endDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
    jQuery("#startDate").on("dp.change",function (e) {
        jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
    });
    jQuery("#endDate").on("dp.change",function (e) {
        jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
    });
});

更新

在您的 jsFiddle 中，您引用“bootstrap-datepicker.min.js”而不是“bootstrap-datetimepicker.min.js”。
似乎“bootstrap-datepicker.min.js”需要“moment.js”作为先决条件。请注意，顺序包括事项。
最后，“en-gb.js”需要列在“bootstrap-datetimepicker.min.js”之后。

更新了jsFiddle 的工作解决方案。

【讨论】：

你改变了什么？在外部。我看到您将格式添加到 jQuery 中。就这些吗？
我使用的网址与您的网址不同。相同的文件名但不同的网址。
感谢您的帮助。我刚刚意识到您将其从引导程序 3.1 更改为引导程序 2.2。这不起作用，因为我的网站使用的是 bootstrap 3。我使用的时间脚本版本适用于 bootstrap 3。
我仍然无法让它工作。在 jFiddle 之外。我将更新上面的代码。
我想我应该将日期时间脚本添加到底部。感谢您的帮助。

【解决方案2】：

jsFiddle 中的脚本包含顺序不起作用，下面是修改后的可用示例顺序。正如@malkassem 所建议的，moment.js 是引导日期选择器工作所必需的。

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>        
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js"></script>                
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>`

【讨论】：

【解决方案3】：

让日期和/或时间选择器工作的最简单方法是安装以下软件包

Install-Package Bootstrap.v3.Datetimepicker.CSS

然后在 _Layout 中引用已安装的文件

<!-- JS -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>   <!-- Bootstrap v3.3.5 -->
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/Scripts/Core.js"></script>

然后将下面的脚本添加到</body>标签之前的布局页面

<script>
jQuery(document).ready(function () {

    jQuery('.datepicker').datetimepicker({ format: 'DD/MM/YYYY' });
    jQuery('.datetimepicker').datetimepicker();

});
</script>

在 Razor 视图中使用如下

@Html.EditorFor(model => model.MyDate, new { htmlAttributes = new { @class = "form-control datepicker" } })
@Html.EditorFor(model => model.MyDateTime, new { htmlAttributes = new { @class = "form-control datetimepicker" } })

【讨论】：

【解决方案4】：

对于那些使用 ASP MVC 的默认 _Layout.cs 文件的人，将这些脚本导入删除或放在顶部。

Scripts.Render("~/bundles/jquery")
Scripts.Render("~/bundles/bootstrap")

【讨论】：

【解决方案5】：

你可以根据你的朋友设置日期。

前端侧

$('.datepicker').pickadate({
   selectMonths: true,
   selectYears: true,
   format: 'd/m/yyyy'
});

后端侧

date('d-m-Y', strtotime($student->dob));

【讨论】：