JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-group">
<label class="col-sm-2 control-label">Date</label>
<div class="col-sm-10">
<div class='col-md-3'>
<div class="form-group">Check-in
<div class='input-group date' id='date1'data-date-format="DD/MM/YYYY">
<input type='text' name="date1" class="form-control" readonly/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-1'></div>
<div class='col-md-3'>
<div class="form-group">Check-out
<div class='input-group date' id='date2' data-date-format="DD/MM/YYYY">
<input type='text' name="date2" class="form-control" readonly/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<input class="text-danger" id="total"> Nights
</div>
</div><!-- /form-group -->
JavaScript
$(function () {
$('#date1').datetimepicker({pickTime: false});
$('#date2').datetimepicker({pickTime: false});
$("#date1").on("dp.change",function (e) {
$('#date2').data("DateTimePicker").setMinDate(e.date);
});
$("#date2").on("dp.change",function (e) {
$('#date1').data("DateTimePicker").setMaxDate(e.date);
});
//different date
var selector = function (dateStr) {
var d1 = $('#date1').val();
var d2 = $('#date2').val();
var diff = 0;
if (d1 && d2) {
diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
}
$('#total').val(diff);
}
$('#date1,#date2').change(selector)
});//jquery