datepicker不起作用。我無法找到我是什麼代碼

<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
    <script src="js/bootstrap.min.js" type="text/javascript"></script> 

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="js/bootstrap-datepicker.js" type="text/javascript"></script> 
    <script src="js/bootstrap-datepicker.min.js" type="text/javascript"></script> 


    <script> 

     $(document).ready(function() { 
      $('#datePicker') 
       .datepicker({ 
        format: 'mm/dd/yyyy' 
       }) 
       .on('changeDate', function(e) { 
        // Revalidate the date field 
        $('#eventForm').formValidation('revalidateField', 'date'); 
       }); 

      $('#eventForm').formValidation({ 
       framework: 'bootstrap', 
       icon: { 
        valid: 'glyphicon glyphicon-ok', 
        invalid: 'glyphicon glyphicon-remove', 
        validating: 'glyphicon glyphicon-refresh' 
       }, 
       fields: { 
        name: { 
         validators: { 
          notEmpty: { 
           message: 'The name is required' 
          } 
         } 
        }, 
        date: { 
         validators: { 
          notEmpty: { 
           message: 'The date is required' 
          }, 
          date: { 
           format: 'MM/DD/YYYY', 
           message: 'The date is not a valid' 
          } 
         } 
        } 
       } 
      }); 
     }); 

    </script> 



      <div class="form-group"> 
       <div class="date"> 
        <div class="input-group input-append date" id="datePicker"> 
         <input type="text" class="form-control" name="date" /> 
         <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
        </div> 
       </div> 
      </div>

缺少這段代碼顯示了#datepicker輸入組件，但在點擊，它不會打開。它也不能在調用簡單的$（'＃datepicker'）。datepicker（）;方法。請提供一些解決方案。

簡單的datepicker（）方法有它自己的默認設置，但我已經在這個方法中做了我自己的定製。

在body標籤中定義的div標籤中，但我已經簡要地說明了它。使用span標籤將日期選擇器輸入組件嵌入圖標。在這種情況下，我正在使用glyphicon-calender。但在此之前，我告訴編譯器，我將通過編寫class =「input-group-addon add-on」來製作一個圖標。

來源

2016-04-23 Harpreet Singh

bootstrap.js和jquery ui需要jquery。把jquery放在你的頂端。並刪除多個引導腳本定義。

來源

2016-04-23 17:34:26

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
<script src="js/bootstrap.min.js" type="text/javascript"></script> 

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="js/bootstrap-datepicker.js" type="text/javascript"></script> 
<script src="js/bootstrap-datepicker.min.js" type="text/javascript"></script> 

load jquery.js first and than load all js because juery is requisite for all js.

來源

2016-04-23 17:38:41

它現在：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script> 
 

 
    <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js" type="text/javascript"></script> 
 

 

 

 
    <script> 
 

 
     $(document).ready(function() { 
 
      $('#datePicker') 
 
       .datepicker({ 
 
        format: 'mm/dd/yyyy' 
 
       }) 
 
       .on('changeDate', function(e) { 
 
        // Revalidate the date field 
 
        $('#eventForm').formValidation('revalidateField', 'date'); 
 
       }); 
 

 
      $('#eventForm').formValidation({ 
 
       framework: 'bootstrap', 
 
       icon: { 
 
        valid: 'glyphicon glyphicon-ok', 
 
        invalid: 'glyphicon glyphicon-remove', 
 
        validating: 'glyphicon glyphicon-refresh' 
 
       }, 
 
       fields: { 
 
        name: { 
 
         validators: { 
 
          notEmpty: { 
 
           message: 'The name is required' 
 
          } 
 
         } 
 
        }, 
 
        date: { 
 
         validators: { 
 
          notEmpty: { 
 
           message: 'The date is required' 
 
          }, 
 
          date: { 
 
           format: 'MM/DD/YYYY', 
 
           message: 'The date is not a valid' 
 
          } 
 
         } 
 
        } 
 
       } 
 
      }); 
 
     }); 
 

 
    </script> 
 

 

 

 
      <div class="form-group"> 
 
       <div class="date"> 
 
        <div class="input-group input-append date" id="datePicker"> 
 
         <input type="text" class="form-control" name="date" /> 
 
         <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
 
        </div> 
 
       </div> 
 
      </div>

我列入片段jquery-ui.min.js和jquery.min.js和刪除您的引導多餘的夾雜物。

來源

2016-04-23 17:38:46

它仍然不工作。這個回答是針對所有3個答案的 –

我編輯了回覆。它現在有效 –

datepicker不起作用。我無法找到我是什麼代碼

回答

相關問題