bootstrap-datepickerはまったく機能しません

Question

私のdatetimepickerが機能していません正確に何が問題なのか分かりません。 私はCSSやスクリプトのタグを忘れてしまった場合は教えてください。

私はhttp://eonasdan.github.io/bootstrap-datetimepicker/を使用しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> 
 
<script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script> 
 

 
<script type="text/javascript"> 
 
     $(function() { 
 
      $('#datetimepicker8').datetimepicker({ 
 
       icons: { 
 
        time: "fa fa-clock-o", 
 
        date: "fa fa-calendar", 
 
        up: "fa fa-arrow-up", 
 
        down: "fa fa-arrow-down" 
 
       } 
 
      }); 
 
     }); 
 
    </script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> 
 
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<div class="form-group row"> 
 
    <label for="inputPassword3" class="col-sm-2   form-control-label">D.O.B</label> 
 
    <div class="col-sm-10"> 
 
    \t <div class='input-group date' id='datetimepicker8'> 
 
       <input type='text' class="form-control" /> 
 
       <span class="input-group-addon"> 
 
        <span class="fa fa-calendar"> 
 
        </span> 
 
       </span> 
 
     </div> 
 
     
 
    </div> 
 
</div>

Answer 1

あなたのコードで間違ってたくさんのことがありました。不正なcss/jsファイル、不足しているファイル、不正な機能ここでは、正しいバージョンの作業バージョンがあります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/css/tether.css"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> 
 

 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> 
 

 
<div class="container"> 
 
    DATE PICKER 
 
    <div class="row"> 
 
    <div class='col-sm-6'> 
 
     <div class="form-group"> 
 
     <div class='input-group date' id='datetimepicker1'> 
 
      <input type='text' class="form-control" /> 
 
      <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script type="text/javascript"> 
 
     $(function() { 
 
     $('#datetimepicker1').datepicker(); 
 
     }); 
 
    </script> 
 
    </div> 
 
</div>

ブートストラップ4.cssとの.jsリンクでブートストラップ3.cssとの.jsファイルを置き換えます。これをブートストラップの上に含めます。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script> 

Answer 2

これを確認してください。外部CDNリソースの一部が古くなっている、また、あなたのすべてのエラーを与える$(...).datepicker

\t $(document).ready(function() { 
 
\t \t $('#datetimepicker8').datepicker({ 
 
\t \t \t icons: { 
 
\t \t \t \t time: "fa fa-clock-o", 
 
\t \t \t \t date: "fa fa-calendar", 
 
\t \t \t \t up: "fa fa-arrow-up", 
 
\t \t \t \t down: "fa fa-arrow-down" 
 
\t \t \t } 
 
\t \t }); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css" /> \t 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> \t 
 

 
<div class="form-group row"> 
 
    <div class="col-sm-2"> 
 
    <label for="inputPassword3" class="form-control-label">D.O.B</label> 
 
    </div> 
 
    <div class="col-sm-10"> 
 
    <div class='input-group date' id='datetimepicker8'> 
 
     <input type='text' class="form-control" /> 
 
     <span class="input-group-addon"> 
 
     <i class="fa fa-calendar" aria-hidden="true"></i> 
 
     </span> 
 
    </div>   
 
    </div> 
 
</div>