JSFiddle - React, Tailwind, and code Playground
HTML
<div class="top1">
<ul>
<li><label>From</label><input id="min" type="text" value="2014-01-17" />
</li>
<li><label>To</label><input id="max" type="text" value="2014-01-27" class="datepicker" />
</li>
<li><input id="check" type="submit" name="" value="Submit" /></li>
</ul>
</div>
<button id="clear">clear table </button>
<table cellpadding="0" cellspacing="1" id="our_table" class="jan">
<tr id="dte">
<th></th>
</tr>
</table>
CSS
table, table td, table th {
border: 1px solid cyan;
}
JavaScript
$('#clear').on('click', function () {
$('#our_table').html('');
});
$("#min").datepicker();
$("#max").datepicker();
$('#check').on('click', function () {
$('#our_table').html('').append('<tr id="dte"></tr>');
if ($('#min').val() == '') {
alert('Enter From date!!!');
} else if ($('#max').val() == '') {
alert('Enter To date!!!');
} else {
var start = $("#min").datepicker("getDate"),
end = $("#max").datepicker("getDate"),
currentDate = new Date(start),
between = [];
while (currentDate <= end) {
between.push(new Date(currentDate));
currentDate.setDate(currentDate.getDate() + 1);
}
var newHeaders = '';
for (i in between) {
newHeaders += '<th>' + between[i] + '</th>';
}
$('#dte').html(newHeaders);
for (j = 0; j < 9; j++) {
$('#our_table').append('<tr class="td_rows"></tr>');
}
for (i in between) {
$('#our_table tr.td_rows').append('<td>INSERT SOMOETHING HERE</td>');
}
}
});