JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css">
<input type="text" id="data-inicio" name="data-inicio" />
<input type="text" id="data-retorno" name="data-retorno" />
JavaScript
$(document).ready(function () {
var current = new Date();
var aux = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 30);
if (aux.getDay() != 1) {
var nextMonth = new Date(aux.getFullYear(), aux.getMonth() + 1, 1);
var days = Math.floor((nextMonth - aux) / (1000 * 60 * 60 * 24))
if (days < 7) current = new Date(aux.getFullYear(), aux.getMonth(), aux.getDate() + days);
else current = aux;
} else {
current = aux;
}
$("#data-inicio").datepicker({
minDate: current,
dateFormat: 'dd/mm/yy',
beforeShowDay: function (date) {
return [date.getDay() == 1, ""]
},
onSelect: function (selectedDate) {
$.datepicker._clearDate($("#data-retorno"));
var data = $.datepicker.parseDate('dd/mm/yy', selectedDate);
data.setDate(data.getDate('dd/mm/yy') + 7);
$("#data-retorno").datepicker("option", "minDate", data);
}
});
$("#data-retorno").datepicker({
dateFormat: 'dd/mm/yy',
onClose: function (selectedDate) {
$("#data-inicio").datepicker("option", "maxDate", selectedDate);
},
beforeShowDay: function (date) {
return [date.getDay() == 5, ""]
}
});
});