Bootstrap-Datetimepicker 不工作 [英] Bootstrap-Datetimepicker Not working

查看：49
本文介绍了Bootstrap-Datetimepicker 不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

这是 HTML

 
<div class="col-sm-6" style="height:75px;"><div class='col-md-5'><div class="form-group"><div>开始</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 class='col-md-5'><div class="form-group"><div>结束</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>

这里是 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 网站.

提前致谢.

更新

<html lang="en-gb"><头><meta http-equiv="content-type" content="text/html; charset=utf-8"/><meta name="x-ua-compatible" content="IE=edge,chrome=1"/><title>日期时间测试</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/><!-- 样式表--><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"/><!-- 脚本--><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 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 src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js" type="text/javascript"></script><脚本>jQuery.noConflict();//使用其他库的 $ 的代码可以跟在此处.<身体><div class="容器"><div class="col-sm-6" style="height:75px;"><div class='col-md-5'><div class="form-group"><div>开始</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 class='col-md-5'><div class="form-group"><div>结束</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>

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

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

提前致谢.

解决方案

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

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

HTML

<div class="col-sm-6" style="height:75px;"><div class='col-md-5'><div class="form-group"><div>开始</div><div class='input-group date' id='startDate'><input type='text' class="form-control" name="startDate"/><span class="附加组件"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></span>
<div class='col-md-5'><div class="form-group"><div>结束</div><div class='input-group date' id='endDate'><input type='text' class="form-control" name="org_endDate"/><span class="附加组件"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></span>

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.

I have been looking at this for 2 days, and cant figure out what I am doing wrong.

Here is a fiddle with my project. http://jsfiddle.net/dagger2002/RR4hw/

Here is the 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>

Here is the 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);
    });
});

I am getting no errors and when I run it through fiddle it says no errors found. I am new to jQuery so I am not sure what I am doing wrong.

Oh yeah. I am using long name do to this going into a joomla site that is also using moo tools.

Thanks in Advance.

UPDATE

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

This jFiddle works. http://jsfiddle.net/RR4hw/11/

But when I incorporate it into a regular page it breaks. Not sure what I am messing up.

Thanks in advance.

解决方案

There seemed to be some issues with the external resources in your jsFiddle.

I have updated jsFiddle to work. I changed the external resources and made some minor adjustments to the code.

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);
    });
});

UPDATE

Updated jsFiddle with working solution.

这篇关于Bootstrap-Datetimepicker 不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆