Setting defaultDate on DateTimePicker, with use of functions from dtp on event firing

Question

I'm using Bootstrap Datetimepicker to have a calendar on my page and select days and hours.

I'm setting up this way:

var $dtp = $("#datetimepicker1");
$(function () {
    $dtp.datetimepicker({
        format: 'DD-MM-YYYY HH:00',
        locale: 'pt',
        defaultDate: d,
        minDate: dMin,
        maxDate: dMax
    });
});

And I have trigger "dp.change":

$dtp.on("dp.change", function(e) { 
    d = $dtp.data("DateTimePicker").date().toDate();
});

dMin, dMax and d are Date Objects:

var d = new Date(); //actual Date
var dMin = new Date(2012, 0, 1, 0);
var dMax = new Date(); dMax.setDate(dMax.getDate()+2); dMax.setHours(0); //more 2 days

Well, I need to set up defaultDate, because sometimes d are changed and it's not the current date, but another date between dMin and dMax.

The problem is that, no matter if d is current or not, with defaultDate on the initializing setup of datetimepicker, the calendar doesn't work.

Inspecting the error, on console, I conclude that $dtp.data("DateTimePicker") is undefined, when first "dp.change" occurs, but only when I have defaultDate on initializing setup.

I'm having some problems on solving this.

Answer 1

You can simply check if $dtp.data("DateTimePicker") is not undefined using something like if( $dtp.data("DateTimePicker") ) inside your dp.change listner. You can also use event parameter, as the docs says:

Fired when the date is changed.

Parameters:

e = {
    date, //date the picker changed to. Type: moment object (clone)
    oldDate //previous date. Type: moment object (clone) or false in the event of a null
}

Here a live sample:

var d = new Date(); //actual Date
var dMin = new Date(2012, 0, 1, 0);
var dMax = new Date();
dMax.setDate(dMax.getDate()+2);
dMax.setHours(0); //more 2 days

var $dtp = $("#datetimepicker1");
$(function () {
    $dtp.datetimepicker({
        format: 'DD-MM-YYYY HH:00',
        locale: 'pt',
        defaultDate: d,
        minDate: dMin,
        maxDate: dMax
    });
});

$dtp.on("dp.change", function(e) {
    // Solution 1: simply check for undefined
    //if( $dtp && $dtp.data("DateTimePicker") ) d = $dtp.data("DateTimePicker").date().toDate();
    if( e.date ){
        d = e.date.toDate();
    }
});

<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.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment-with-locales.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='col-sm-6'>
  <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 glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

Moreover, since the component uses momentjs, you can init d, dMin and dMax like this:

var d = moment(); //actual Date
var dMin = moment([2012, 0, 1]);
var dMax = moment().add(2, 'days').startOf('day');

See moment(), moment(Number[]), add() and startOf() for further reference.