jQuery change event being fired twice - jquery-ui-datepicker

Question

I have a form with input fields including a date.
Below is my code;
<form action="/test/" method="get" class="form-horizontal">
<!-- truncated codes -->
<label class="col-sm-1 control-label">Date:</label>
<div class="col-sm-2">
<div class="input-group m-b-none">
<span class="input-group-addon btn btn-success btn-sm btn-outline"><i class="fa fa-calendar"></i></span>
<input type="text" name="date" value="{{ $date }}" class="form-control start_date" id="date" autocomplete="off" required>
</div>
</div>
</form>
and it is my jQuery code
$('.start_date').change(function () {
var timestamp = Date.parse($("input[name='date']").val());
if (isNaN(timestamp) == false) {
date = $('.start_date').val();
// call function
} else {
var prev = $(this).data('val');
alert('Invalid Date');
$('#date').val(prev);
}
});
$('#date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: 'yyyy-mm-dd'
});
I don't understand why after each change in date, this function runs twice.
What am I doing wrong and how can I fix it?
I'm using jQuery version 3.1.1 and already tried this.
Also, I don't have .start_date anywhere else in the page.

Answer 1

You might have '.start_date' somewhere else in the page as well.
I suggest you use off()
$('.start_date').off().change(function (){
var timestamp = Date.parse($("input[name='date']").val());
if (isNaN(timestamp) == false) {
date = $('.start_date').val();
/*call function*/
}
else{
var prev = $(this).data('val');
alert('Invalid Date');
$('#date').val(prev);
}
});

Answer 2

Problem is my bootstrap datepicker change event fire two times. The trick is to use changeDate instead of change.
$('.start_date').on("changeDate", function() {
});