Question

我有以下代码，似乎工作正常。它使用了datepicker，当添加两个日期时，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>

虽然总日期已更新，但更改事件似乎并未触发。有人可以帮忙吗？

由于

Answer 1

您可以在totaldays输入上拨打change来触发更改事件。

e.g。

$('#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>

Javascript datepicker输入字段未触发

1 个答案: