How to change placeholder of jQuery datepicker to two weeks from current date?

Question

I want to update the placeholder of the "End" input (id="datepicker2) to the date 2 weeks after the start date (id=datepicker). So far, only the value of the end date is updated when the user selects a new start date from the calendar. In the case the user leaves the start date at default, I want them to see the end date as well, not "in 2 weeks".

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');;
});

});

DEFAULT STATE (START DATE IS CURRENT DATE)

AFTER USER PICKS DIFFERENT DATE

Answer 1

I tested the code you posted and it appears to work. I made some minor changes you may want to consider.

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