How to set default date of format 'MM/dd/yyyy'

Question

Here is my code for creating calendar by using Bootstrap datetimepicker:

$('#datetimepicker12').datetimepicker({
    inline: true,
    format: 'MM/dd/yyyy',
    minDate: new Date(moment(new Date()).add(0, 'days').toDate()),
    maxDate: new Date(moment(new Date()).add(7, 'days').toDate()),
});

Now I want to set default date of calendar to be my custom date, its format is like this '2017-03-30'

How can I convert that to be the same format as format of datetimepicker that I have set before?

Answer 1

Bootstrap datetimepicker uses momentjs to manage dates, so:

• You don't need new Date(...) and toDate() in your minDate and maxDate option.
• The format option should be compliant to moment tokens, in your case change it into uppercase MM/DD/YYYY.

The picker has a defaultDate option, you can use it to set 2017-03-30 as default date, you simply have to parse it using moment (moment('2017-03-30') will be enough since you input is in supported ISO 8601 format).

Note the the datimepicker has useCurrent option if you have to default to the current date.

Here a working example:

$('#datetimepicker12').datetimepicker({
  inline: true,
  format: 'MM/DD/YYYY',
  minDate: moment().startOf('day'),
  maxDate: moment().add(7, 'days').endOf('day'),
  defaultDate: moment('2017-03-30')
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/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.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/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="row">
    <div class="col-md-8">
      <div id="datetimepicker12"></div>
    </div>
  </div>
</div>

The snippet will not work after the 2017-30-17 beacuse the default date will be not included between minDate and maxDate.