选择开始日期后自动更改结束日期

Question

所以我有这样的场景，屏幕如下：

我正在尝试使结束日期始终比开始日期晚 7 天。因此，当我将开始日期更改为2019-05-01 时，结束日期应为2019-05-08 等等。

我正在使用 datepicker 库来完成这项工作。

代码：

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


<script>

$(function() {

  $(".txtEndDate").datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: '../../../images/calendar.png',
    buttonImageOnly: true,
    title: 'Click to open calendar',
    alt: 'Click to open calendar'
  });
});

$(function() {

  $(".txtStartDate").datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: '../../../images/calendar.png',
    buttonImageOnly: true,
    title: 'Click to open calendar',
    alt: 'Click to open calendar'
  });
});

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

我实现了一个 onchange 函数来让它工作，但它没有任何改变，我做错了什么吗？

我的日期选择器的屏幕截图：

Answer 1

或者，您可以使用提供的.on("change", function()，而不是收听$('#[start/end datepicker id]').change。

Fiddle 或下面的 sn-p：

var interval = 7;
    $(function() {
      $("#sdatepicker").datepicker({
        minDate: 0,
        maxDate: interval
      });

      $("#edatepicker").datepicker({
        minDate: 0
      });

      var today = new Date();
      var target = new Date(today.getFullYear(), today.getMonth(), today.getDate() + interval);
      $("#sdatepicker").datepicker("setDate", today);
      $("#edatepicker").datepicker("setDate", target);

      $("#sdatepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        showOn: 'button',
        buttonImage: '../../../images/calendar.png',
        buttonImageOnly: true,
        title: 'Click to open calendar',
        alt: 'Click to open calendar'
      }).on("change", function() {
        var start = $("#sdatepicker").datepicker("getDate");
        start.setDate(start.getDate() + interval);
        $("#edatepicker").datepicker("setDate", start);
        $("#edatepicker").datepicker("option", "minDate",
          $("#sdatepicker").datepicker("getDate"));
      });

      $("#edatepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        showOn: 'button',
        buttonImage: '../../../images/calendar.png',
        buttonImageOnly: true,
        title: 'Click to open calendar',
        alt: 'Click to open calendar'
      }).on("change", function() {
        var start = $("#sdatepicker").datepicker("getDate");
        $("#sdatepicker").datepicker("setDate", start);
        $("#sdatepicker").datepicker("option", "maxDate",
          $("#edatepicker").datepicker("getDate"));
      });
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Start Date: <input type="text" id="sdatepicker"></p>
<p>End Date: <input type="text" id="edatepicker"></p>

解释：

minDate 用于防止选择过去的日期。 0 是今天。

使用间隔，您可以在其中任何一个更改时以固定间隔更新开始/结束日期，并且限制结束日期不能小于开始日期 并且开始日期不能大于结束日期，您可以结合maxDate 和minDate：

$("#edatepicker").datepicker("option", "minDate", $("#sdatepicker").datepicker("getDate"));

和：

$("#sdatepicker").datepicker("option", "maxDate", $("#edatepicker").datepicker("getDate"));

更新

下面的fiddle 显然解决了 OP 问题discussed。片段：

var interval = 7;
$(function() {
  var start;
  var today = new Date();
  var target = new Date(today.getFullYear(), today.getMonth(), today.getDate() + interval);
  $(".txtStartDate").datepicker("setDate", today);
  $(".txtEndDate").datepicker("setDate", target);

  $(".txtStartDate").datepicker({
    minDate: 0,
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: '../../../images/calendar.png',
    buttonImageOnly: true,
    title: 'Click to open calendar',
    alt: 'Click to open calendar',
    onSelect: function() {
      start = $(this).datepicker("getDate");
      start.setDate(start.getDate() + interval);
      $(".txtEndDate").datepicker("setDate", start);
      $(".txtEndDate").datepicker("option", "minDate",
        $(this).datepicker("getDate"));
      $(this).change();
    }
  }).on("change", function() {
    $(".txtEndDate").datepicker("setDate", start);
    $(".txtEndDate").datepicker("option", "minDate",
      $(this).datepicker("getDate"));
  });

  $(".txtEndDate").datepicker({
    minDate: 0,
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: '../../../images/calendar.png',
    buttonImageOnly: true,
    title: 'Click to open calendar',
    alt: 'Click to open calendar'
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Start Date: <input type="text" class="txtStartDate"></p>
<p>End Date: <input type="text" class="txtEndDate"></p>

$(".txtEndDate").datepicker("option","minDate", start.getDate())

不会工作，因为

var start = $(".txtStartDate").datepicker("getDate"); 被初始化，然后更新为start.setDate(start.getDate() + interval);。

这意味着start.getDate() 不会导致$(".txtStartDate").datepicker("getDate");

$(".txtEndDate").datepicker("option", "minDate", $(".txtStartDate").datepicker("getDate")); 工作时。

另外，显然上个月不会触发 onchange 或 onselect 设置结束日期，同时调用它们两次并且提前初始化 var start; 会：

onSelect: function() {
      start = $(this).datepicker("getDate");
      start.setDate(start.getDate() + interval);
      $(".txtEndDate").datepicker("setDate", start);
      $(".txtEndDate").datepicker("option", "minDate",
        $(this).datepicker("getDate"));
      $(this).change();
    }
  }).on("change", function() {
    $(".txtEndDate").datepicker("setDate", start);
    $(".txtEndDate").datepicker("option", "minDate",
      $(this).datepicker("getDate"));
  });

Answer 2

不要使用输入的change 事件。使用日期选择器的onSelect 选项，当您从中选择日期时，它会运行回调。

您应该使用另一个日期选择器的setDate() 方法来更改其日期。

  $(".txtStartDate").datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: '../../../images/calendar.png',
    buttonImageOnly: true,
    title: 'Click to open calendar',
    alt: 'Click to open calendar',
    onSelect: function(value, dp) {
      var interval = 7;
      var start = dp.datepicker("getDate");
      start.setDate(start.getDate() + interval);
      $(".txtEndDate").datepicker("setDate", start);
    }
  });