Bootstrap-Datetimepicker不起作用

问题描述 投票:10回答:4

我已经看了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);
    });
});

我没有收到任何错误,当我通过小提琴运行它时,它说没有发现错误。我是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
4个回答
10
投票

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


6
投票

jsFiddle中的脚本包含顺序不起作用,以下是可行示例的修改顺序。正如@malkassem所建议的那样,引导日期选择器必须运行moment.js。


0
投票

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


0
投票

对于使用ASP MVC的默认_Layout.cs文件的用户,请在底部删除这些脚本导入,或将其放在顶部。

© www.soinside.com 2019 - 2024. All rights reserved.