JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css">
<table>
<tr>
<td>Fecha Desde:</td>
<td colspan="2"><input type="text" name="FechaDesde" size="40" class="datepicker" id="FechaDesde"></td>
</tr>
<tr>
<td>Fecha Hasta:</td>
<td colspan="2"><input type="text" name="FechaHasta" size="40" class="datepicker" id="FechaHasta"></td>
</tr>
</table>
JavaScript
function LimitaRango(input) {
if (input.id == 'FechaHasta') {
var minDate = new Date($('#FechaDesde').val());
minDate.setDate(minDate.getDate() + 1);
var maxDate = new Date($('#FechaDesde').val());
dayOfWeek = minDate.getUTCDay();
if (dayOfWeek != 1) {
days_to_add = 6;
} else {
days_to_add = 4;
}
maxDate.setDate(maxDate.getDate() + days_to_add);
return {
minDate: minDate,
maxDate: maxDate
}
}
}
$(document).ready(function() {
$('#FechaDesde, #FechaHasta').datepicker({
dayNames: ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sábado"],
dayNamesMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
//dateFormat: "DD, dd MM yy",
//altFormat: "DD, dd MM yy",
dateFormat: "dd M yy",
showAnim: "drop",
beforeShow: LimitaRango,
beforeShowDay: $.datepicker.noWeekends
});
});