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>
...
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]');
//http://stackoverflow.com/a/1184359/297641
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
function adjustDates(selMonthDates, $sel) {
var $options = $sel.find('option');
var dates = $options.length;
//append/remove missing dates
if (dates > selMonthDates) { //remove
$options.slice(selMonthDates).remove();
} else { //append
var dateOptions = [];
for (var date = dates + 1; date <= selMonthDates; date++) {
dateOptions.push('<option value="' + date + '">' + date + '</option>');
}
$sel.append(dateOptions.join('')); //reduces DOM call
}
}
function resetDates() {
$lm.val(function (i, v) {
return (v == '') ? '0' : v;
});
$ly.val(function (i, v) {
return (v == '') ? '2013' : v;
});
}
var paintCals = function (day, month, year) {
resetDates();
//adjust start date
var selMonthDates = daysInMonth((parseInt($lm.val(), 10) + 1), $ly.val());
adjustDates(selMonthDates, $ld);
//If current day selection > number of days in selected month then set the day to max allowed day
if (day > selMonthDates) {
day = selMonthDates;
$ld.val(day); //update selection
}
//selected start date
var selectedDate = new Date(year, month, day);
//next day from start date
var nextDay = new Date(selectedDate.getTime() + 86400000);
...