logo标签列表

Bootstrap-Datetimepicker不起作用。

jquerytwitter-bootstrap-3bootstrap-datetimepicker
10

我已经看了两天，还是弄不清楚我做错了什么。

这里有一个包含我的项目的 JSFiddle 示例。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 tools，所以我在使用长名称。

提前致谢。

更新

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

但当我把它嵌入到一个普通页面中时，它就会出问题。我不确定我在搞什么鬼。

提前感谢。

5个回答
10

在你的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

->

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"。请注意包含的顺序很重要。
  • 最后，在 "bootstrap-datetimepicker.min.js" 之后列出 "en-gb.js"。

已更新jsFiddle，解决了问题。

你在外部改了什么？我看到你把格式加入了 jQuery。还有别的吗？ - dagger2002
我使用了与你不同的URL。相同的文件名但是不同的URL。 - malkassem
谢谢你的帮助。我刚刚意识到你把它从Bootstrap 3.1改成了Bootstrap 2.2。这不行，因为我的网站正在使用Bootstrap 3。我使用的时间脚本版本与Bootstrap 3兼容。 - dagger2002
我仍然无法让它在 jFiddle 之外工作。我将更新上面的代码。 - dagger2002
我想我应该将日期时间脚本添加到底部。感谢您的帮助。 - dagger2002
谢谢malkassem！我不知道在jsfiddle中js脚本的顺序很重要，就像在实际开发中一样。 - duyn9uyen
6
在jsFiddle中，脚本包含顺序失效了，以下是可行示例的修改顺序。正如@malkassem建议的那样，要使Bootstrap日期选择器正常工作，需要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>`
0

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

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" } })
0

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

Scripts.Render("~/bundles/jquery")
Scripts.Render("~/bundles/bootstrap")
0
你可以根据你的格式设置日期。
前端部分。
$('.datepicker').pickadate({
   selectMonths: true,
   selectYears: true,
   format: 'd/m/yyyy'
});

后端

date('d-m-Y', strtotime($student->dob));
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接