2015-02-08 72 views
0

我可以開始,我很盲目,但我不能在自己的代碼中找到失敗,請有人找到一分鐘,告訴我我到底在做什麼?jQuery日期選擇器 - 不要彈出

代碼看起來總的來說對我來說確實不錯,但是這個事實並沒有影響到這個事實。

代碼如下所示:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

<div class="date-form"> 

<div class="form-horizontal"> 
    <div class="control-group"> 
     <label for="date-picker-2" class="control-label">B</label> 
     <div class="controls"> 
      <div class="input-group"> 
       <input id="date-picker-2" type="text" class="date-picker form-control" /> 
       <label for="date-picker-2" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span> 

       </label> 
      </div> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label for="date-picker-3" class="control-label">C</label> 
     <div class="controls"> 
      <div class="input-group"> 
       <label for="date-picker-3" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span> 

       </label> 
       <input id="date-picker-3" type="text" class="date-picker form-control" /> 
      </div> 
     </div> 
    </div> 
</div> 

    <hr /> 
</div> 


<script> 
$(".date-picker").datepicker(); 

$(".date-picker").on("change", function() { 
    var id = $(this).attr("id"); 
    var val = $("label[for='" + id + "']").text(); 
    $("#msg").text(val + " changed"); 
}); 
</script> 

和小提琴這裏: http://jsfiddle.net/bbm035nx/1/

不幸的是,我們這裏有一個問題,日期選擇器甚至不彈出,看上去沒有發現jQuery的,但爲什麼或發生了什麼?我沒有任何線索。請大家可以試試看嗎?

謝謝大家,再次抱歉,愚蠢的問題。

+0

你在哪裏,包括jQuery的用戶界面? – beck03076 2015-02-08 15:54:39

+0

第3行從開始貝克:) – Andurit 2015-02-08 15:56:40

+0

這就是隻有jquery沒有jquery-ui ..檢查這個..http://jqueryui.com/ – beck03076 2015-02-08 15:58:51

回答

0

請看右側面板。你忘了包含必要的庫。按順序添加它們(jQuery> jQueryUI> Bootstrap)並且它可以完成所有工作!

<head> 
    <meta content="text/html; charset=UTF-8" http-equiv="content-type"> 
    <script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript"> 
    <link href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css" type="text/css" rel="stylesheet"> 
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
</head> 

http://jsfiddle.net/bbm035nx/2/