引導日期選擇器不起作用

Question

我想使用引導日期選擇器，它不起作用。關於同樣的問題，我已經看過這麼多關於bootstrap的頁面。我幾乎嘗試了所有這些，但最終它沒有奏效。它充當一個普通的文本字段。

我在我的文件中也包含了bootstrap-datepicker.js。

我發現這個例子，我不知道爲什麼它不工作：

<div id="search_modal" class="modal hide fade" style="width:50%;"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
       <h3>Search for a room</h3> 
     </div> 

     <div class="modal-body" align=""> 
      <label>City/place</label> 
      <div class="input-append"><input type="text" id="" name=""><span class="add-on"><i class="icon-search"></i></span></div> 

      <label>number of people</label> 
      <div class="input-append"><input type="text" id="number" name="number"></div> 

      </br> 

      <input type="text" id="dp1">    
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.0.2/js/bootstrap-datepicker.min.js"></script> 
      <script type="text/javascript"> 
      $('#dp1').datepicker(); 
       </script> 

     </div> 

     <div class="modal-footer" > 
      <button class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
      <button class="btn btn-primary">Register</button> 
     </div> 

     </div> 
     <div class=""> 
     <a class="btn btn-large btn-success" href="#search_modal" data-toggle="modal">Book a room ss</a> 
     </div> 

我該如何解決這個問題？

以下是我爲了解決問題而查找的一些頁面。

• Bootstrap Datepicker Example
• Detect change to selected date with bootstrap-datepicker
• Twitter Bootstrap DatePicker does not work

Answer 1

<div class="modal-body" align=""> 
     <label>City/place</label> 
     <div class="input-append"><input type="text" id="" name=""><span class="add-on"><i class="icon-search"></i></span></div> 

     <label>number of people</label> 
     <div class="input-append"><input type="text" id="number" name="number"></div> 

     </br> 


     <div data-date-format="dd-mm-yyyy" data-date="12-02-2012" class="input- append date myDatepicker"> 
     <input type="text" value="" size="16" class="span2"> 
     <span class="add-on"><i class="icon-calendar"></i></span> 
     </div> 
    </div> 
    <div class="modal-footer" > 
     <button class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
     <button class="btn btn-primary">Register</button> 
    </div> 

    </div> 
    <div class=""> 
    <a class="btn btn-large btn-success" href="#search_modal" data-toggle="modal">Book a room ss</a> 
    </div> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.0.2/js/bootstrap-datepicker.min.js"></script> 
    <script type="text/javascript"> 
    $('.myDatepicke').datepicker(); 
    </script> 

它爲我工作。

p.s.加上整個事情關閉之前你的身體標記

或許你也想看看在this

這裏是jsfiddle我編輯的代碼 檢查它，它現在的作品完美