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: "&#x3C;Prejšnji",
    nextText: "Naslednji&#x3E;",
    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: "&#x3C;Prejšnji",
    nextText: "Naslednji&#x3E;",
    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>

Check JSFiddle and you'll see that 1st function in form is not working properly but idk why. If I take minimal example, the code will work but I don't know where the problem is in that code — BlueMilkyh
– BlueMilkyh, Commented May 26, 2021 at 8:51
Please read the advice in minimal reproducible example — "Divide and conquer. If you’re not sure what the source of the problem is, start removing code a bit at a time until the problem disappears – then add the last part back." — this has a good change of helping you find the problem yourself. — Quentin
– Quentin, Commented May 26, 2021 at 8:53
if I take the JQuery UI Datepicker code out, the code will work but if I change anything in the Datepicker, the calendar won't pop out — BlueMilkyh
– BlueMilkyh, Commented May 26, 2021 at 8:56

Ravi Gajera · Accepted Answer · 2021-05-26 09:09:43Z

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)

            }

});

answered May 26, 2021 at 9:09

Ravi Gajera

1876 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

otejiri · Accepted Answer · 2021-05-26 09:15:48Z

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);
    }
});

Collectives™ on Stack Overflow

why does Input onchange javascript does not work in my code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related