Javascriptのdatepicker入力フィールドが発砲しない

Question

私は大丈夫と思われる以下のコードを持っています。これは、日付ピッカーを使用し、二つの日付が追加されたときtotaldaysフィールドには、2つの日付の間の日数の量によって移入されます。

<script type="text/javascript"> 
$("#dateone").datepicker({ 
    defaultDate: "+1w", 
    minDate: 0, 
    firstDay: 0, 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    numberOfMonths: 1, 
    onSelect: function(selectedDate) { 
     var minDate = $(this).datepicker('getDate'); 
     var newMin = new Date(minDate.setDate(minDate.getDate() + 1)); 
     $("#datetwo").datepicker("option", "minDate", newMin); 
     var d1 = $('#dateone').datepicker('getDate'); 
     var d2 = $('#datetwo').datepicker('getDate'); 
     var diff = 0; 
     if (d1 && d2) { 
      diff = Math.floor((d2.getTime() - d1.getTime())/86400000); // ms per day 
     } 
     $('#totaldays').val(diff); 



    } 
}); 
$("#datetwo").datepicker({ 
    defaultDate: "+1w", 
    minDate: '+2d', 
    changeMonth: true, 
    firstDay: 0, 
    dateFormat: 'dd-mm-yy', 
    numberOfMonths: 1, 
    onSelect: function(selectedDate) { 
     var maxDate = $(this).datepicker('getDate'); 
     var newMax = new Date(maxDate.setDate(maxDate.getDate() - 1)); 
     $("#dateone").datepicker("option", "maxDate", newMax); 
     var d1 = $('#dateone').datepicker('getDate'); 
     var d2 = $('#datetwo').datepicker('getDate'); 
     var diff = 0; 
     if (d1 && d2) { 
      diff = Math.floor((d2.getTime() - d1.getTime())/86400000); // ms per day 
     } 
     $('#totaldays').val(diff); 

    } 
}); 

$("#dateone").datepicker('setDate', '+1'); 
$("#datetwo").datepicker('setDate', '+2'); 


</script> 

totaldaysが更新される一方で、変更イベントが発火していないようです。誰も助けることができますか？

おかげ

Answer 1

あなたは、変更イベントをトリガーするtotaldays入力にchangeを呼び出すことができます。

$('#totaldays').val(diff).change(); 

コード例：どのような変更イベント

$("#dateone").datepicker({ 
 
    defaultDate: "+1w", 
 
    minDate: 0, 
 
    firstDay: 0, 
 
    dateFormat: 'dd-mm-yy', 
 
    changeMonth: true, 
 
    numberOfMonths: 1, 
 
    onSelect: function(selectedDate) { 
 
    var minDate = $(this).datepicker('getDate'); 
 
    var newMin = new Date(minDate.setDate(minDate.getDate() + 1)); 
 
    $("#datetwo").datepicker("option", "minDate", newMin); 
 
    var d1 = $('#dateone').datepicker('getDate'); 
 
    var d2 = $('#datetwo').datepicker('getDate'); 
 
    var diff = 0; 
 
    if (d1 && d2) { 
 
     diff = Math.floor((d2.getTime() - d1.getTime())/86400000); // ms per day 
 
    } 
 
    $('#totaldays').val(diff).change(); 
 
    } 
 
}); 
 

 
$("#datetwo").datepicker({ 
 
    defaultDate: "+1w", 
 
    minDate: '+2d', 
 
    changeMonth: true, 
 
    firstDay: 0, 
 
    dateFormat: 'dd-mm-yy', 
 
    numberOfMonths: 1, 
 
    onSelect: function(selectedDate) { 
 
    var maxDate = $(this).datepicker('getDate'); 
 
    var newMax = new Date(maxDate.setDate(maxDate.getDate() - 1)); 
 
    $("#dateone").datepicker("option", "maxDate", newMax); 
 
    var d1 = $('#dateone').datepicker('getDate'); 
 
    var d2 = $('#datetwo').datepicker('getDate'); 
 
    var diff = 0; 
 
    if (d1 && d2) { 
 
     diff = Math.floor((d2.getTime() - d1.getTime())/86400000); // ms per day 
 
    } 
 
    $('#totaldays').val(diff).change(); 
 
    } 
 
}); 
 

 
$("#dateone").datepicker('setDate', '+1'); 
 
$("#datetwo").datepicker('setDate', '+2'); 
 

 
$("#totaldays,#color,#parcels").change(function() { 
 
    var totaldays = parseInt($(this).val()); 
 
    var color = parseInt($("#color").val()); 
 
    var parcels = parseInt($("#parcels").val()); 
 
    $("#totalprice").val(totaldays * color * parcels); 
 
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<input id="dateone" type="text" /> 
 
<input id="datetwo" type="text" /> 
 
<div> 
 
    Total Days 
 
    <input id="totaldays" type="text" /> 
 
</div> 
 
<div> 
 
    Color 
 
    <input id="color" type="text" /> 
 
</div> 
 
<div> 
 
    Parcels 
 
    <input id="parcels" type="text" /> 
 
</div> 
 
<div> 
 
    Total Price 
 
    <input id="totalprice" type="text" /> 
 
</div>