Javascript日期選擇器輸入字段沒有觸發

Question

我有以下代碼似乎工作正常。它使用的日期選擇器，當添加兩個日期totaldays場是由兩個日期之間的天量填充：

<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>