Juned Ansari Juned Ansari - 4 months ago 11
jQuery Question

want to fetch +7 date of selected date

i have two datepciker textbox now what i want when i select any date from first datepicker, in second datepicker + 7 day automatically selected.

eg.
selected date in first datepicker : 27-07-2016
second datepicker it should be automatically : 03-08-2016



$(function() {
$("#txtstart_date").datepicker();
});
$("#txtstart_date").change(function() {
crnt = toDate($("#txtstart_date").val());
var nextWeekday = addDays(crnt, 7);
alert("nextday : " + nextWeekday);
});

function addDays(dateObj, numDays) {
dateObj.setDate(dateObj.getDate() + numDays);
return dateObj;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<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.0/jquery-ui.js"></script>
<div class="formelementblock">
<div class="formelement">
<input type="text" name="txtstart_date" class="input-text datepickerwidth required" id="txtstart_date" placeholder="Start Date*" />
</div>

</div>
<div class="formelementblock last">
<div class="formelement">
<input type="text" name="txtend_date" class="input-text datepickerwidth required" id="txtend_date" placeholder="End Date*" />
</div>
</div>




Answer

$(function() {
  $("#txtstart_date").datepicker();
});
$("#txtstart_date").change(function() {
  crnt = new Date($("#txtstart_date").val());
  var nextWeekday = addDays(crnt, 7);
  alert("nextday : " + nextWeekday);
  var end = $.datepicker.formatDate('mm/dd/yy', nextWeekday);
  $("#txtend_date").val(end);
});

function addDays(dateObj, numDays) {
  dateObj.setDate(dateObj.getDate() + numDays);
  return dateObj;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<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.0/jquery-ui.js"></script>
<div class="formelementblock">
  <div class="formelement">
    <input type="text" name="txtstart_date" class="input-text datepickerwidth required" id="txtstart_date" placeholder="Start Date*" />
  </div>

</div>
<div class="formelementblock last">
  <div class="formelement">
    <input type="text" name="txtend_date" class="input-text datepickerwidth required" id="txtend_date" placeholder="End Date*" />
  </div>
</div>

Comments