JSFiddle - React, Tailwind, and code Playground
HTML
<form name="disponibilidad">
<div class="arrival">
<span>Start</span>
<label>
<select name="llegada-dia"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28" selected="selected">28</option><option value="29">29</option></select>
</label>
<label>
<select name="llegada-mes">
<option value="" selected=""></option>
<option value="0">jan</option><option value="1">feb</option><option value="2">mar</option><option value="3">apr</option><option value="4">may</option><option value="5">jun</option><option value="6">jul</option><option value="7">ago</option><option value="8">sep</option><option value="9">oct</option><option value="10">nov</option><option value="11">dec</option>
</select>
</label>
<label>
<select name="llegada-ano">
<option value="" selected=""></option>
<option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option>
</select>
</label>
<input name="llegada"...
CSS
*{ margin: 5px;}
div span{
display:block;
}
JavaScript
$(function(){
months = ['jan','feb','mar','apr','may','jun','jul','ago','sep','oct','nov','dec'];
/* Cachear selects */
var $ld = $('select[name=llegada-dia]');
var $lm = $('select[name=llegada-mes]');
var $ly = $('select[name=llegada-ano]');
var $sd = $('select[name=salida-dia]');
var $sm = $('select[name=salida-mes]');
var $sy = $('select[name=salida-ano]');
var manyDays = function( month, year ){
var fecha = new Date(year, (month+1) , 0);
return fecha.getDate();
}
var paintCals = function( day, month , year ){
if(day == '') day = 1;
if(month == '') month = 0;
if(year == '' ) year = 2013;
//month = month -1;
var fecha = new Date( year, month , day );
var dia = fecha.getDate();
var mes = fecha.getMonth();
var anyo = fecha.getFullYear();
var dias_mes = manyDays( mes,anyo );
var next_fecha = fecha;
next_fecha.setDate(next_fecha.getDate() + 1);
var next_dia = next_fecha.getDate();
var next_mes = next_fecha.getMonth();
var next_anyo = next_fecha.getFullYear();
console.log(next_dia, next_mes, next_anyo);
var next_dias_mes = manyDays( next_mes, next_anyo ) ;
/* LOG*/
$('#log').empty().append('Mes: ' + mes).append('<br>');
$('#log').append('Next mes: '+ next_mes).append('<br>');
$('#log').append('Max dias mes:' + (dia == dias_mes ? 1 : 0)).append('<br>');
$('#log').append('Fecha: ' + fecha).append('<br>');
$('#log').append('Siguiente: ' + next_fecha);
/* Actualizar dias entrada */
$ld.empty();
for(var tmpdia = 1; tmpdia <= dias_mes; tmpdia++){
var doption = $('<option>').attr( 'value',tmpdia )
.text( tmpdia );
if(dia == tmpdia && dia != ''){
doption.attr('selected', 'selected');
}
$ld.append(doption);
}
/* Actualizar dias salida */
$sd.empty();
for(var tmpdia = next_dia; tmpdia <= next_dias_mes;...