Bootstrap datepicker- onchange should only kick in when user makes a change

Question

In my Xpages application I enable a bootstrap datepicker on an input field:

$(document).ready(
    function() {
        var dateFormat = "#{javascript: app['date_format_date_only_lowercase']}";
        x$('#{id:inpCardValid}').datepicker({
            language: sv,
            format: (dateFormat),
            weekStart: 1,
            todayBtn: true,
            clearBtn: true,
            daysOfWeekHighlighted: "0,6",
            calendarWeeks: true,
            autoclose: true,
            todayHighlight: true
        }).on('changeDate', checkDate);
    }
)

function checkDate() {
    var from = x$('#{id:inpCardValid}').val();
    var validDate = new Date(from);
    var checkDate = Date.now();
    checkDate = addDays(checkDate, 30);
    if (checkDate >= validDate) {
      XSP.openDialog("#{id:dlgLCardValidDate}")
    }
}

function addDays(date, days) {
    var result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
}

However the onchange already kicks in when the page is loaded (probably because the date needs to be formatted for the date-picker). I only want the onchange function is called when the user is making a change.

How must I do this?

Answer 1

try the hide event for the datepicker to do your computing, probably the formatter kicks the onchange event