如何将 jQuery 日期选择器的占位符更改为当前日期后两周？

Question

我想将“结束”输入 (id="datepicker2) 的占位符更新为开始日期 (id=datepicker) 后 2 周的日期。到目前为止，仅 当用户从日历中选择新的开始日期时，结束日期的值会更新 如果用户将开始日期保留为默认值，我希望他们也能看到结束日期。 ，而不是“在 2周”。

HTML

<form class="reminderControls">
                    <label for="startDate">Start:</label>
                    <!-- START DATE -->
                    <div class="dateParent">
                        <input type="text" id="datepicker" value="">
                    </div>
                </form>
                <form class="reminderControls">
                    <label for="endDate">End:</label>
                    <!-- END DATE-->
                    <div class="dateParent2">
                        <input type="text" id="datepicker2" value="" placeholder="in  2 weeks">
                    </div>
                </form>

JQUERY

$(function () {
$('.dateParent').datepicker({
    inline: true,
    altField: '#datepicker',
    onSelect: function () {
        var selectedDate = $('.dateParent').datepicker('getDate');
        var endDate = new Date(selectedDate);
        endDate.setDate(endDate.getDate() + 14);

        var endDateStr = (endDate.getMonth() + 1) + '/' + endDate.getDate() + '/' + (endDate.getYear() + 1900);
        $('#datepicker2').val(endDateStr); //changes value of end date
    }

});
$('#datepicker').focus(function (event) {
    event.preventDefault();
    $('.ui-datepicker').addClass('shown');
    return false;
});
$(document).click(function (event) {
    if (!$(event.target).is('.dateParent *'))
        $('.ui-datepicker').removeClass('shown');;
});

});

默认状态（开始日期为当前日期）

用户选择不同日期后

Answer 1

我测试了您发布的代码，它似乎有效。我做了一些你可能需要考虑的小改动。

$(function() {
  $('.dateParent').datepicker({
    inline: true,
    altField: '#datepicker',
    onSelect: function(dt, obj) {
      var selectedDate = $('.dateParent').datepicker('getDate');
      var endDate = new Date(selectedDate);
      endDate.setDate(endDate.getDate() + 14);
      // changes placeholder of end date
      $('#datepicker2').attr("placeholder", $.datepicker.formatDate("mm/dd/yy", endDate));
    }
  });
  $('#datepicker').focus(function(event) {
    event.preventDefault();
    $('.ui-datepicker').addClass('shown');
    return false;
  });
  $(document).click(function(event) {
    if (!$(event.target).is('.dateParent *'))
      $('.ui-datepicker').removeClass('shown');;
  });

});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<form class="reminderControls">
  <label for="startDate">Start:</label>
  <!-- START DATE -->
  <div class="dateParent">
    <input type="text" id="datepicker" value="">
  </div>
</form>
<form class="reminderControls">
  <label for="endDate">End:</label>
  <!-- END DATE-->
  <div class="dateParent2">
    <input type="text" id="datepicker2" value="" placeholder="in  2 weeks">
  </div>
</form>