Not able to customize bootstrap-datepicker

Question

I am trying to customize the calendar, but it seems that it is not taking into account the customization, such as displaying the today button or ignoring past dates. I tried the following: in the head

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datepicker3.min.css" rel="stylesheet">

in the top body

<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>

Then in the form:

    <script>
        $('.datepicker').datepicker({
            startDate: 0,
            todayBtn: "linked"
        });
    </script>
    <div class="form-group">
        <div class="input-group date" data-provide="datepicker">
            <input type="text" class="form-control" placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-th"></i>
            </span>
            <p class="help-block text-danger"></p>
        </div>
    </div>

However, I still do not get the 'Today' button. I am not sure if the reason is because the javascript code is not correct? (not calling the calendar correctly) or misplaced?

Answer 1

Basically, your jQuery call with todayBtn option isn't really pointing to your input. The datepicker functionality you're seeing is based on your html. I moved the script after the elements (so it runs after the target elements are in the DOM) and changed the jQuery call to find the correct element. Also, I believe the startDate option should be a date so I changed it from 0 to '3/16/2016' . The original html is unchanged...

<div class="form-group">
  <div class="input-group date" data-provide="datepicker">
    <input type="text" class="form-control"
      placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
    <span class="input-group-addon">
      <i class="glyphicon glyphicon-th"></i>
    </span>
    <p class="help-block text-danger"></p>
  </div>
</div>

<script>
  $("div.input-group.date").datepicker({
    startDate: '3/1/2016',
    todayBtn: "linked"
  });
</script>