why does Input onchange javascript does not work in my code

Question

I've question why Input onchange in JS doesn't work in my code. if I select 1st date it doesn't call function onchange="myFunction2(this.value)" but in the 2nd form it does. First function is working only if I keep pressing enter. Also check console.log and you'll see that 1st function isn't working

JSFiddle

( function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( [ "../widgets/datepicker" ], factory );
    } else {
        factory( jQuery.datepicker );
    }
}( function( datepicker ) {
datepicker.regional.sl = {
    closeText: "Zapri",
    prevText: "<Prejšnji",
    nextText: "Naslednji>",
    currentText: "Trenutni",
    monthNames: [ "Januar","Februar","Marec","April","Maj","Junij",
    "Julij","Avgust","September","Oktober","November","December" ],
    monthNamesShort: [ "Jan","Feb","Mar","Apr","Maj","Jun",
    "Jul","Avg","Sep","Okt","Nov","Dec" ],
    dayNames: [ "Nedelja","Ponedeljek","Torek","Sreda","Četrtek","Petek","Sobota" ],
    dayNamesShort: [ "Ned","Pon","Tor","Sre","Čet","Pet","Sob" ],
    dayNamesMin: [ "Ned","Pon","Tor","Sre","Čet","Pet","Sob" ],
    weekHeader: "Teden",
    dateFormat: "dd.mm.yy",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: "" };
datepicker.setDefaults( datepicker.regional.sl );
return datepicker.regional.sl;
} ) );

$(document).ready(function(){
var array = ["21.05.2002"];
function DisableDates(date) {
   var string = jQuery.datepicker.formatDate('dd.mm.yy', date);
    return [dates.indexOf(string) == -1];   
}

$('#date1').datepicker({
  minDate: 0,
  changeMonth: true, 
  changeYear: true,
beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('dd.mm.yy', date);
    return [ array.indexOf(string) == -1 ]  
},
onSelect: function(dateStr) {
       var newDate = $(this).datepicker('getDate');
       if (newDate) { 
               newDate.setDate(newDate.getDate() + 1);
       }
       $('#date2').datepicker('setDate', newDate).datepicker('option', 'minDate', newDate); 
            }
});
});

( function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( [ "../widgets/datepicker" ], factory );
    } else {    
        factory( jQuery.datepicker );
    }
}( function( datepicker ) {
datepicker.regional.sl = {
    closeText: "Zapri",
    prevText: "<Prejšnji",
    nextText: "Naslednji>",
    currentText: "Trenutni",
    monthNames: [ "Januar","Februar","Marec","April","Maj","Junij",
    "Julij","Avgust","September","Oktober","November","December" ],
    monthNamesShort: [ "Jan","Feb","Mar","Apr","Maj","Jun",
    "Jul","Avg","Sep","Okt","Nov","Dec" ],
    dayNames: [ "Nedelja","Ponedeljek","Torek","Sreda","Četrtek","Petek","Sobota" ],
    dayNamesShort: [ "Ned","Pon","Tor","Sre","Čet","Pet","Sob" ],
    dayNamesMin: [ "Ne","Po","To","Sr","Če","Pe","So" ],
    weekHeader: "Teden",
    dateFormat: "dd.mm.yy",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: "" };
datepicker.setDefaults( datepicker.regional.sl );

return datepicker.regional.sl;
} ) );
$(document).ready(function(){
  var array = ["21.05.2002"]; 
function DisableDates(date) {
    var string = jQuery.datepicker.formatDate('dd.mm.yy', date);  
    return [dates.indexOf(string) == -1];   
}
$('#date2').datepicker({
  minDate: 0,
  changeMonth: true, 
  changeYear: true,
beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('dd.mm.yy', date);
    return [ array.indexOf(string) == -1 ]
}    
});
});
var zacetek = 1;
 var konec;

function myFunction2(val) {
 zacetek = val;
 zacetek = zacetek.split(".").reverse().join("/");
 console.log(zacetek);

 if (konec != undefined){
  var razlika = ((new Date(konec) - new Date(zacetek))/86400000 );
document.getElementById("price").value = razlika ;
 }
  }
function myFunction1(val) {
konec = val;
konec = konec.split(".").reverse().join("/");
console.log(konec);

if (zacetek != undefined){
var razlika = ((new Date(konec) - new Date(zacetek))/86400000 );
document.getElementById("price").value = razlika ;
}
}

html

<div class="form-row">
  <div class="form-group col-md-6">

    <label for="date"><b>Arrival</b></label>
    <input type="text" class="form-control" required placeholder="Arrival date" id="date1" name="date1" onchange="myFunction2(this.value)">
  </div>
  <div class="form-group col-md-6">
    <label for="date2"><b>Deprature</b></label>
    <input class="form-control" type="text" required id="date2" name="date2" placeholder="deprature" onchange="myFunction1(this.value)">
  </div>
  <div class="form-group col-md-12">
    <label for="example-date-input"><b>Price</b></label>
    <input class="form-control bg-white" type="text" id="price" required placeholder="45€/night" disabled>
  </div>
</div>

Answer 1

Here is the another way to call myFunction2 .

$('#date1').datepicker({
  minDate: 0,
  changeMonth: true, 
  changeYear: true,
beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('dd.mm.yy', date);
    return [ array.indexOf(string) == -1 ]  
},
onSelect: function(dateStr) {
                
       var newDate = $(this).datepicker('getDate');
       if (newDate) { 
               newDate.setDate(newDate.getDate() + 1);
       }
       $('#date2').datepicker('setDate', newDate).datepicker('option', 'minDate', newDate);
 
       myFunction2(this.value)

            }

});

Answer 2

There is already a onSelect: function(dateStr) handing the #date1 change event. So move the function logic there.

$('#date1').datepicker({
    minDate: 0,
    changeMonth: true,
    changeYear: true,
    beforeShowDay: function(date) {
        var string = jQuery.datepicker.formatDate('dd.mm.yy', date);
        return [array.indexOf(string) == -1]
    },
    onSelect: function(dateStr) {
        zacetek = dateStr;
        zacetek = zacetek.split(".").reverse().join("/");
        console.log(zacetek);
        if (konec != undefined) {
            var razlika = ((new Date(konec) - new Date(zacetek)) / 86400000);
            document.getElementById("price").value = razlika;
        }
        var newDate = $(this).datepicker('getDate');
        if (newDate) {
            newDate.setDate(newDate.getDate() + 1);
        }
        $('#date2').datepicker('setDate', newDate).datepicker('option', 'minDate', newDate);
    }
});