JSFiddle - React, Tailwind, and code Playground

by Christa B

HTML

<div id="dateofarrival">
                        date of arrival<br>                 
                        <div class='select' id='date'><select class="short-input" name="day_from"><option value= "01" >01
</option>
<option value= "02" >02
</option>
<option value= "03" >03
</option>
<option value= "04" >04
</option>
<option value= "05" >05
</option>
<option value= "06" >06
</option>
<option value= "07" >07
</option>
<option value= "08" >08
</option>
<option value= "09" >09
</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" selected="selected">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" >28
</option>
<option value= "29" >29
</option>
<option value= "30" >30
</option>
<option value= "31" >31
</option></select></div>
<div class='select' id='month'><select class="short-input" name="month_from" size="1"><option value="01" >January
	</option>
<option value="02" >February
	</option>
<option value="03" >March
	</option>
<option value="04" >April
	</option>
<option value="05" >May
	</option>
<option value="06" >June
	</option>
<option value="07" >July
	</option>
<option value="08"  selected="selected">August
	</option>
<option value="09" >September
	</option>
<option value="10" >October
	</option>
<option value="11" >November
	</option>
<option value="12" >December
	</option></select></div>
<div class='select' id='year'>
                            	<select class='short-input' name='year_from'>
 <option value= 2015 > 2015</option>
...

CSS

select {
    float: left;
    margin-right: 10px;
}

div {
    float: left;
    margin-right: 20px;
}

JavaScript

var date_to = new Date($("year_to").val(), $("month_to").val(), $("day_to").val()); // get the value of the date_to
var date_from = new Date($("year_from").val(), $("month_from").val(), $("day_from").val()); // get value of date_from
var diff = Math.abs(date_to - date_from); // calculate difference betwwen dates

document.getElementById("nights").innerHTML = diff