ブートストラップの日付ピッカーが機能しないのはなぜですか？

ブートストラップ日付ピッカー（https://github.com/eternicode/bootstrap-datepicker）を使用しようとしましたが、動作させることができません。 jsfiddleすべてオンブートストラップの日付ピッカーが機能しないのはなぜですか？

は魔法のように動作します：http://jsfiddle.net/hwuktpt2/

いくつかは、実際のページでテストを失敗した後、私も空白の新しいページを試してみましたが、もう一度最初からすべてを統合。 jQueryが動作し、ブートストラップ・スタイリングが動作し、Datatablesが動作しますが、私は日付ピッカーを動作させることができません。

提案がありますか？

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.css"/> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css"/> 
    <script type="text/javascript" src="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/locales/bootstrap-datepicker.de.min.js"></script> 
    <script type="text/javascript"> 
     $('.date_picker input').datepicker({ 
      format: "dd.mm.yyyy", 
      todayBtn: "linked", 
      language: "de" 
     }); 
    </script> 
    <style type="text/css"> 
     .control-label { 
      padding-top:7px; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="page-header"> 
      Neues Mobile Device anlegen 
     </div> 
    </div> 
    <div class="container"> 
     <form class="form-horizontal" name="mobdev_neu" action="mobdev_neu.php" method="post"> 
     <div class="form-group"> 
      <label for="mobdev_neu_type" class="col-xs-2 control-label">Type</label> 
      <div class="col-xs-10"> 
      <select id="mobdev_neu_type" class="form-control" name="mobdev_neu_type" REQUIRED> 
       <option value="">-- Bitte auswählen --</option> 
      </select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="mobdev_neu_imei" class="col-xs-2 control-label">IMEI</label> 
      <div class="col-xs-10"> 
      <input type="text" id="mobdev_neu_imei" class="form-control" name="mobdev_neu_imei" placeholder="Pflichtfeld" REQUIRED> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="mobdev_neu_kaufdatum" class="col-xs-2 control-label">Kaufdatum</label> 
      <div class="col-xs-10 date_picker"> 
      <input type="text" id="mobdev_neu_kaufdatum" class="form-control" name="mobdev_neu_kaufdatum" placeholder="Pflichtfeld"> 
      </div> 
     </div> 
     </form> 
    </div> 
</body>

出典

2016-05-31 Daniel

document.readyの日付ピッカーの初期化呼び出しをラップします。このコードはdomの外観からロードが完了する前に実行されています。 JavaScriptは解釈されるので、ブラウザで読み込まれた時点で実行されます。頭の中にコードを定義しているので、本体とその内容はまだロードされていません。セレクタはdatepickerを初期化する要素を検出しません。 document.ready機能を使用しない場合は、スクリプトをbodyタグの最後に移動することもできます。

$(function(){ 
     $('.date_picker input').datepicker({ 
      format: "dd.mm.yyyy", 
      todayBtn: "linked", 
      language: "de" 
     }); 
    });

出典

2016-05-31 13:59:31

今は完璧に機能しています...時にはそれはとても簡単です... ありがとうございました！ – Daniel

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>    
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>

あなたが日付フィールドを作りたいどこ体内のコードの下、この使用を使用した後にこれらのライブラリを使用してください。

<div class='input-group date' id='datetimepicker1'> 
<input type='text' class="form-control" name="update_time" placeholder="Update Date"/> 
         <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-calendar"></span> 
         </span> 
        </div> 
        <script type="text/javascript"> 
         var j = jQuery.noConflict(); 
         j(function() { 
          j('#datetimepicker1').datetimepicker({ 
           format: 'L', 
           disabledHours: true, 
          }); 
         }); 
        </script>

出典

2016-05-31 14:15:01 user6444905

ブートストラップの日付ピッカーが機能しないのはなぜですか？

答えて

関連する問題