Get value from datetimepicker bootstrap 3

Question

I'm wish to get the date value from the datetimepicker (http://eonasdan.github.io/bootstrap-datetimepicker/) using jquery to find the difference between 2 input dates. I had spent days to do it but no luck at all. Here are my code:

HTML

<div class="col-sm-4">
    <label for="label_duration" id="lblStartDate" 
           class="col-sm-2 control-label">Start Date</label>
    <div class='input-group date' id='datetimepicker1'>
        <input type='text' class="form-control" name="startdate" 
               id="startdate" placeholder="yyyy-mm-dd"  required/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

<div class="col-sm-4">
    <label for="label_duration" id="lblEndDate"  class="col-sm-2 
           control-label">End Date</label>
    <div class='input-group date' id='datetimepicker2'>
        <input type='text' class="form-control" name="enddate" id="enddate" 
               placeholder="yyyy-mm-dd" required/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

jQuery

$(function () {
    $('#datetimepicker1').datetimepicker({
        viewMode: 'years',
        format: 'YYYY-MM-DD'
    });

    $('#datetimepicker2').datetimepicker({
        viewMode: 'years',
        format: 'YYYY-MM-DD'
    });

});

Answer 1

Diff in days between two strings:

var diffInDays = (new Date('1970-01-01').valueOf()-new Date('1970-01-02').valueOf())/(3600*24*1000);

Diff in days between your two inputs:

var diffInDays = (new Date($('#startdate').val()).valueOf()-new Date($('#enddate').val()).valueOf())/(3600*24*1000);

Answer 2

From the API documentation (http://tarruda.github.io/bootstrap-datetimepicker/):

// Considering you are on a GMT-3 timezone and the input contains '2000-01-17 10:00'
var localDate = picker.getLocalDate(); // localDate === 2000-01-17 07:00
var utcDate = picker.getDate(); // utcDate === 2000-01-17 10:00

OR handle the changeDate event:

el.on('changeDate', function(e) {
  console.log(e.date.toString());
  console.log(e.localDate.toString());
});

Answer 3

You can use .date()(ref doc) method which emits the current date as a moment object

var mydatetimepicker = $('#datetimepicker1').datetimepicker();
var dtp = mydatetimepicker.data('DateTimePicker');
console.log(dtp.date());

Since datetimepicker is spitting out a momentjs object it is easy to calculate the difference (ref docs)

var mydatetimepicker1 = $('#datetimepicker1').datetimepicker();
var dtp1 = mydatetimepicker1.data('DateTimePicker');

var mydatetimepicker2 = $('#datetimepicker2').datetimepicker();
var dtp2 = mydatetimepicker2.data('DateTimePicker');

var start = dtp1.date();
var end = dtp2.date();

var diff = end.diff(start);
console.log(diff);

Here is a demo http://jsfiddle.net/dhirajbodicherla/0Ltv25o8/1241/