datepickerが機能しません。私は私がこのコードは#datepicker入力コンポーネントを示すが、クリックの上、それは開かないコード

Question

<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（）メソッドには独自のデフォルト設定がありますが、このメソッドでは独自のカスタマイズを行いました。

bodyタグで定義されているdivタグでは、私は簡単にそれを作っています。 spanタグは、datepicker入力コンポーネントとともに埋め込みアイコンとして使用されます。この場合、グリフコンカレンダーを使用しています。しかし、その前に私はclass = "input-group-addon add-on"を書いてアイコンを作っていることをコンパイラに伝えました。

Answer 1

bootstrap.jsとjquery uiにはjqueryが必要です。 jqueryを上に置きます。複数のブートストラップスクリプト定義を削除します。

Answer 2

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

Answer 3

それが動作するようになりました：私は、スニペットでjquery-ui.min.jsとjquery.min.jsを含めて、ブートストラップのあなたの冗長介在物を取り除い

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

。