JSFiddle - React, Tailwind, and code Playground
by Abra Cadabra
HTML
<p>firstdate:
<input type="text" id="dp1" />
</p>
<div>
<select name="sel" id="sel">
<option value="1">1 week</option>
<option value="2">2 week</option>
<option value="3">3 week</option>
<option value="4">4 week</option>
</select>
</div>
<p>seconddate:
<input type="text" id="dp2" />
</p>
JavaScript
$(function () {
var $dp1 = $("#dp1").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(){
var currentDate = $(this).datepicker('getDate');
$dp2.datepicker('option', 'minDate', currentDate);
}
});
var $dp2 = $("#dp2").datepicker({
dateFormat: 'yy-mm-dd'
});
$("#sel").on('change', function () {
var self = $(this);
var date2 = $dp1.datepicker('getDate');
var daysDiff = 7 * parseInt(self.find(':selected').val());
date2.setDate(date2.getDate() + daysDiff);
$dp2.datepicker("setDate", date2);
});
});