twitter-bootstrapcalendarbootstrap-datetimepickereonasdan-datetimepickerdisable

Bootstrap Datetimepicker Pop Up Shows Disabled Dates

Following is my code 

$('#dob').datetimepicker({
  format: 'DD-MM-YYYY',
  maxDate: new Date("2009", "01", "01"),
  useCurrent: false
});

But when I test my interface it pops up already disabled dates (current month). This is not user friendly. How can I fix it so it opens my maximum allowed month? (January, 2009) Please check following image for reference.

I googled but found no answeres for this.

enter image description here

Solution

  • You can use viewDate option:

    This will change the viewDate without changing or setting the selected date.

    Here a live sample:

    $('#dob').datetimepicker({
  format: 'DD-MM-YYYY',
  maxDate: new Date(2009, 0, 1),
  useCurrent: false,
  viewDate: new Date(2009, 0, 1)
});
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.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/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <input type="text" class="form-control" id="dob" />
    </div>
  </div>
</div>