BootstrapV3 datetimepicker not changing on next prev button click

Question

Calendar is displaying but I have to change date on next and previous button click and it is not working.

I am using Bootstrap V3 and datetimepicker version 4.15.35 https://github.com/Eonasdan/bootstrap-datetimepicker

Here is code :

//To display Calendar
$(document).ready(function() {
    $('#datetimepicker1').datetimepicker({
        format: "MM/DD/YYYY",
        defaultDate: new Date()
    });
});

//Next button added to Change date on next button click
$(function() {
    $('#next').click(function() {
        var date = $('#datetimepicker1').data("DateTimePicker").getDate(); // giving error
        date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
        $('#datetimepicker1').datepicker("setDate", date);
    });
});

//Previous button added to Change date on prev button click
$(function() {
    $('#previous').click(function() {
        var date = $('#datetimepicker1').datetimepicker('getDate');
        date.setTime(date.getTime() - (1000 * 60 * 60 * 24))
        $('#datetimepicker1').datetimepicker("setDate", date);
    });
});

Answer 1

I would recommend that you manipulate the date(s) using moment

see working sample on JSFiddle

$('#datetimepicker1').datetimepicker({
    format: "MM/DD/YYYY",
    defaultDate: new Date()
});

//Next button added to Change date on next button click
$(function() {
    $('#next').click(function(event) {
        event.preventDefault();
        var date = $('#datetimepicker1').data("DateTimePicker").date();
        nextdate = moment(date).add(1, 'days');
        $('#datetimepicker1').data("DateTimePicker").date(nextdate);
    });
});

//Previous button added to Change date on prev button click
$(function() {
    $('#previous').click(function(event) {
        event.preventDefault();
        var date = $('#datetimepicker1').data("DateTimePicker").date();
        predate = moment(date).subtract(1, 'days');
        $('#datetimepicker1').data("DateTimePicker").date(predate);
    });
});