如何确保结束日期总是比开始日期多7天？

Question

我有一个显示开始日期和结束日期的页面，如下所示：

​

​

正如您所看到的，默认情况下，结束日期总是比开始日期多7天。我被允许更改开始日期，但我如何确保每次更改开始日期时，结束日期都会加上相应的开始日期的7天？

代码：

  <%

        String relPath = "../../../";
        String currentDate = CoreUtil.parseDate(new Date());

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        //get current date
        Calendar cal = Calendar.getInstance();
        //Number of Days to add
        cal.add(Calendar.DAY_OF_MONTH, 7);
        String defaultDate = sdf.format(cal.getTime());





    %>

Start Date:&emsp;<input class="txtStartDate" style="font: 13px/1.231 Trebuchet MS;" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly><br><br>


End Date: &emsp; <input class="txtEndDate" style="font: 13px/1.231 Trebuchet MS;" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>"  readonly required/>

编辑：

这是我的JavaScript代码：

<Script>
    $('#txtStartDate').datepicker();
    $('#txtEndDate').datepicker();

    $('#txtStartDate').change(function(){
        var interval = 7;

        function convertDateString(p) { return (p < 10) ? '0' + p : p; }

        var startDate = new Date($(this).val());
        startDate.setDate(startDate.getDate() + interval);
        $('#txtEndDate').val( startDate.getFullYear() + '/' +     convertDateString(startDate.getMonth() + 1) + '/' + convertDateString(startDate.getDate()));
    });

</script>

基本上，每当我更改开始日期时，结束日期也应该自动更改为(start date+7 days)，这就是我要做的所有事情。上面的代码应该可以工作，但当我更改开始日期时，它并没有更改我的结束日期。

Answer 1

这可能会有帮助。

Date.prototype.addDays = function(days) {
    var date = new Date(this.valueOf());
    date.setDate(date.getDate() + days);
    return date;
}

$('#txtStartDate').datepicker();
$('#txtEndDate').datepicker();

$('#txtStartDate').change(function(){
    var interval = 7;
    var startDate = new Date($(this).val());
    $('#txtEndDate').val(startDate.addDays(interval));
});

​

Answer 2

您可以使用JavaScript Date对象进行计算，并使用字符串进行格式设置：

​

// Get references to HTML elements
const startInput = document.getElementById("txtStartDate");
const endInput = document.getElementById("txtEndDate");

// Listen for changes to #txtStartDate
startInput.addEventListener("change", updateEndDate);

// Respond to changes
function updateEndDate(event){

  // Calculate end date
  let endDate = new Date(startInput.value);
  endDate.setUTCDate(endDate.getUTCDate() + 7);

  // Separate the parts of end date
  let yyyy = endDate.getUTCFullYear(),
      mm = endDate.getUTCMonth() + 1,
      dd = endDate.getUTCDate();

  // Add initial zeros if needed
  if(mm < 10){mm = "0" + mm; }
  if(dd < 10){dd = "0" + dd; }

  // Format and display end date
  endInput.value = `${yyyy}-${mm}-${dd}`;

}

<input type="date" id="txtStartDate" />
<input type="date" id="txtEndDate" />

​