ブートストラップ日付ピッカー依存

Question

ブーストラップ日付ピッカーcssが壊れているようです。

リンク、モーション、js、less、多くのbootstrap-datepickerバージョン/ js/css、何も動作しませんでした。

実は私はこの持っている：私は何か、私は時間を過ごす、魔女の依存関係を逃した

\t 
 
$('#datepicker2').datepicker({ 
 
\t \t todayHighlight: true, 
 
\t \t weekStart: 1 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet"/> 
 

 
<div class="row show-grid"> 
 
    <!--- CALENDAR ---> 
 
    <div class="col-xs-6 col-md-4"> 
 
    <div class="panel panel-default" > 
 
     <div id="datepicker2" style="margin-left: 20%;"><br/></div> 
 
     <br/> 
 
    </div> 
 
    </div> 
 
</div>

はよくありませんか？私はdatetimepickerをdatepickerなどと混ぜ合わせたと思います。

私はこれを持っている必要があります：moment.jsのバージョンに問題があるように思わ

Answer 1

あなたが含めていますあなたが問題に直面している理由である間違ったライブラリ。

あなたのための実例があります。

$(function() { 
 
$('.datepicker').datepicker({ 
 
    format: 'mm/dd/yyyy', 
 
}); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" /> 
 
<script 
 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
 
    crossorigin="anonymous"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> 
 

 

 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class='col-sm-6'> 
 
      <div class="input-group date" data-provide="datepicker"> 
 
       <input type="text" class="form-control"> 
 
       <div class="input-group-addon"> 
 
        <span class="glyphicon glyphicon-th"></span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

。あなたが持っているスクリプトは、ロケールのために、あなたはmoment.jsスクリプトを含める必要がある：

とmoment.jsのためだけでなく

$('#datepicker2').datepicker({ 
 
\t \t todayHighlight: true, 
 
\t \t weekStart: 1 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 

 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 

 
<div class="row show-grid"> 
 
    <!--- CALENDAR ---> 
 
    <div class="col-xs-6 col-md-4"> 
 
    <div class="panel panel-default" > 
 
     <div id="datepicker2" style="margin-left: 20%;"><br/></div> 
 
     <br/> 
 
    </div> 
 
    </div> 
 
</div>