2016-02-12 81 views
3

我尝试在模态窗口内部实现日期选择器。我不知道为什么错误切换不起作用。我包含了所有的头文件。我尝试了一个能够正常工作的单独文件,但是在将它包含在我的网站中后,它无法正常工作。未显示Jquery Datepicker

页眉:

<link href="css/bootstrap.css" rel="stylesheet" /> 
<link href="css/landing-page.css" rel="stylesheet"/> 
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.css" media="screen"> 
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"> 
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
<link href="assets/css/style.css" rel="stylesheet"> 
<link href="assets/css/style-responsive.css" rel="stylesheet"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 

HTML代码:

<input type="text" class="form-control" placeholder="Date Of Birth" name="dateofbirth" id="dateofbirth"> 

脚本:

<script src="assets/js/jquery.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 
<script src="assets/js/jquery-1.7.1.min.js"></script> 
<script src="assets/js/jquery.validate.js"></script> 
<script src="js/script.js"></script> 
<script type="text/javascript" src="assets/js/bootstrap-datetimepicker.js" ></script> 
<script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script> 
<script type="text/javascript"> 
    $.backstretch("assets/img/login-bg1.jpg", {speed: 500}); 
    $('#dateofbirth').datetimepicker 
     ({ 
      autoclose: 1, 
      todayHighlight: 1, 
      startView: 2, 
      minView: 3, 
      maxView: 4, 
      forceParse: 0, 
      format:'dd-mm-yyyy' 
     }); 
    addEventListener('load', prettyPrint, false); 

</script> 
+0

把你的DateTimePicker代码文件准备好节。 –

+0

检查您的浏览器控制台并查看显示的错误数量? –

+0

没有错误。那就是问题所在。这就是为什么我无法找到究竟是哪里出了问题。 –

回答

1

问题在于,在元素和/或所需脚本加载到页面之前,您正尝试将元素绑定到事件。

你的JavaScript改成这样:

$(document).ready(function() { 
     $.backstretch("assets/img/login-bg1.jpg", {speed: 500}); 
     $('#dateofbirth').datetimepicker 
      ({ 
       autoclose: 1, 
       todayHighlight: 1, 
       startView: 2, 
       minView: 3, 
       maxView: 4, 
       forceParse: 0, 
       format:'dd-mm-yyyy' 
      }); 
     addEventListener('load', prettyPrint, false); 
     $('pre').addClass('prettyprint linenums'); 
    }); 
+0

我试过像这样bt就像以前的datepicker不working.no变化,我可以在这里找到。请以另一种方式帮助我。 –

+0

尝试datepicker();是我唯一的猜测,因为我从来没有使用过datetimepicker,也许你使用的参数对该函数调用无效? –

+0

我尝试过以其他方式工作,感谢您的帮助。 –

1

变化

$('#dateofbirth').datetimepicker() 

$('#dateofbirth').datepicker() 

我在jsbin上有一个工作示例。您可以查看此here

您可以查看其完整页面输出here

+0

我试过这种方式显示$(...)datepicker不是控制台选项卡中的函数错误 –

+0

您是否看到给定链接中的代码? –

+0

是的,它现在正在工作。谢谢你 –