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>