Bootstrap datepicker dependencies-Twitter bootstrap

xif
September 12, 2017
134 views
0 votes
2 Answers

Boostrap datepicker css seems to be broken.

I tried many way, including link, moment.js, less, many bootstrap-datepicker version /js / css, nothing work.

Actually I have this :

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

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

I Missed something, I spend hours, witch dependencies is not good ? I think I mixed datetimepicker with datepicker or something like this.

I should have this :

Answers

It seems to be a problem with your version of moment.js. The script that you have is only for locale, you need to include the moment.js script:

and the order of the moment.js as well

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

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

You are including wrong library that is the reason you’re facing the problem.

Here’s the working example for you.

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

Please signup or login to give your own answer.

Click here to cancel reply.