Bootstrap Datetimepicker wrong default date with minDate

Question

I'm using Eonasdan Bootstrap Datetimepicker: http://eonasdan.github.io/bootstrap-datetimepicker/

Although I can't get the minDate and maxDate to work as expected. Since the date is dynamic and changes the fiddle is set upp with moments.js´ subtract/add

Conditions

minDate = today + 1 day
maxDate = today + 3 days
default value = today + 2 days

The above returns the value tomorrow and not the default value. If minDate is changed to -2 days it works just fine.

See Fiddle: http://jsfiddle.net/9uqpu88v/8/

twoDaysFromToday =  moment().add(2, 'd').format('YYYY-MM-DD');

$('#datetimepicker1 input').val(twoDaysFromToday); 
      var datetimepicker = $('#datetimepicker1').datetimepicker({
      format: 'YYYY-MM-DD',
      minDate: moment().add(1, 'd').format('YYYY-MM-DD'), // Tomorrow
      maxDate: moment().add(3, 'd').format('YYYY-MM-DD'), // Three days from today
    })


<div class="form-group">
  <div class="input-group date" id="datetimepicker1">
    <input type="text" id="datetimepicker1" class="form-control" value="" />    
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
  </div>
</div>

I see no issue in your fiddle (minDate and maxDate are set to the given "hardcoded" value), while your snippet is missing required libraries. Anyway I suggest to use moment parsing function specifying format (see docs). In your example: moment('2016-07-01, 'YYYY-MM-DD') instead of moment('2016-07-01'). — VincenzoC

VincenzoC VincenzoC · Accepted Answer · 2016-06-28T22:27:44

You can pass moment object instead of string to minDate and maxDate. Use defaultDate option to set the value to your picker instead of jQuery val(). Note that the library provides also a date method to set value to the component.

Use moment startOf to be hour independent.

Here a working example:

var datetimepicker1 = $('#datetimepicker1').datetimepicker({
  format: 'YYYY-MM-DD',
  useCurrent: false,
  defaultDate: moment().startOf('day').add(2, 'd'),
  minDate: moment().startOf('day').add(1, 'd'),
  maxDate: moment().startOf('day').add(3, 'd')
})

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group">
  <div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control" />
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
  </div>
</div>

Bootstrap Datetimepicker wrong default date with minDate

1 Answers