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...
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 ){
//console.log('M/Y:'+month,year);
// +1 Otherwise you get last month
var days_in_month = new Date(year, month+1, 0);
//console.log("Date:"+days_in_month);
return days_in_month.getDate();
}
var paintCals = function( day, month , year ){
if(day == '') day = 1;
if(month == '') month = 0;
if(year == '' ) year = 2013;
// needed to avoid Feb 31
var check_fecha = new Date( year, month );
check_mes = check_fecha.getMonth();
check_anyo = check_fecha.getFullYear();
var check_dias_mes = manyDays( check_mes, check_anyo );
if(day > check_dias_mes)
day = check_dias_mes;
var fecha = new Date( year, month , day );
var dia = fecha.getDate();
var mes = fecha.getMonth();
var anyo = fecha.getFullYear();
//console.log('D/M/Y:'+dia,mes,anyo);
//console.log('Day:'+day,"Dia:"+dia);
var dias_mes = manyDays( mes,anyo );
var next_fecha = fecha;
next_fecha.setDate(next_fecha.getDate()+1);
next_fecha.setFullYear(fecha.getFullYear() + (mes == 12 ? 1 : 0));
var next_dia = next_fecha.getDate();
var next_mes = next_fecha.getMonth();
var next_anyo = next_fecha.getFullYear();
//console.log('nD/nM/nY:'+next_dia,next_mes,next_anyo);
// Otherwise you get last month
var next_dias_mes = manyDays( next_mes, next_anyo ) ;
/* LOG*/
$('#log').empty().append('Mes: ' + mes).append('<br>');
$('#log').append('Next mes: '+...