JSFiddle - React, Tailwind, and code Playground
HTML
<div id="editorRows">
<div class="deleteRow">
<div class="formInput">
<input type="text" id="beginDate" class="dpicker">
</div>
<div class="formInput">
<input type="id" id="endDate" class="dpicker">
</div>
<a href="#" id="addItem">add</a>
</div>
</div>
JavaScript
$('body').on('focus', ".dpicker", function () {
$(this).datepicker();
});
$("#addItem").click(function () {
$.ajax({
url: this.href,
cache: false,
success: function (html) {
$("#editorRows").append(str);
}
});
return false;
});
$(document).on('click', 'a.deleteRow', function () {
$(this).closest("div").remove();
return false;
});
var str = '<div class="deleteRow">' +
'<div class="formInput">' +
' <input type="text" id="" class="dpicker">' +
'</div>' +
'<div class="formInput">' +
' <input type="id" id="" class="dpicker">' +
'</div> ' +
'<a href="#" id="addItem">add</a>' +
'</div>';
$(function () {
$("#beginDate").datepicker({
minDate: 1,
changeMonth: true,
dateFormat: 'mm/dd/yy',
onClose: function (selectedDate, instance) {
if (selectedDate != '') {
$("#endDate").datepicker("option", "minDate", selectedDate);
var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
date.setMonth(date.getMonth() + 3);
var minDate2 = new Date(selectedDate);
minDate2.setDate(minDate2.getDate() + 1);
$("#endDate").datepicker("option", "minDate", minDate2);
$("#endDate").datepicker("option", "maxDate", date);
}
}
});
$("#endDate").datepicker({
minDate: 1,
changeMonth: true,
dateFormat: 'mm/dd/yy',
onClose: function (selectedDate) {
$("#beginDate").datepicker("option", "maxDate", selectedDate);
}
});
});