JSFiddle - React, Tailwind, and code Playground

by kannan ds

HTML

<div class="top1">
  <ul>
     <li><label>From</label><input id="min" type="text" value="2014-01-17" class="datepicker" />
     </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>
<div id="container">
    <table cellpadding="0" cellspacing="1" id="our_table" class="jan">
        <thead>
   		    <tr id="dte">
                <th></th>
            </tr>
        </thead>
    <tbody>
        <tr class="abc"></tr>
        <tr class="abc"></tr>
    </tbody>
 </table>  <table id="header-fixed"></table>
</div>

CSS

#our_table, #our_table td, #our_table th {
    border: 1px solid green;
 }

#our_table tbody, #our_table thead
{
    display: block;
}

#our_table tbody 
{
   overflow: auto;
   height: 100px;
}
#container{
        width:400px;
    height:800px;
}


#header-fixed { 
    display:none;
    position: fixed; 
    top: 0px; 
    /*background-color:white;*/
    width:90.4%;
    /*background-color:black;*/
    margin:65px 0px 0px 114px;
    /*padding-bottom:20px;*/
    color:white;
    height:7%;
}
#header-fixed thead {
	float:left;
   width:auto;

}
#header-fixed th {
height: 50px;
/*width:1%;*/
width:180px;
/*border-right:1px solid black;*/
    }

JavaScript

$("#min").datepicker();
	$("#max").datepicker();


	$('#check').on('click', function () {
		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);
            }
            
            //between.join('<th>'); <--- THIS IS WRONG :)
            var newHeaders = '';
            for (i in between) {
                newHeaders += '<th>' + formatDate(between[i]) + '</th>';
		    }
            $('#dte').html(newHeaders);

			$('#our_table').append('<tr class="td_rows"></tr>');
            var daysBetween = daydiff(currentDate, end);
            for (i in between) {
                $('#our_table tr.abc').append('<td>INSERT SOMOETHING HERE</td>');
		    }
		 }
         $("#our_table tbody td").each(function (i) { 
            var tdWidth = $(this).width();
             if($('#our_table thead th:nth-child('+(i+1)+')').width() != null)
             {
                 $('#our_table thead th:nth-child('+(i+1)+')').width(tdWidth);
             }    
         });        
       
    });
        
 		function parseDate(str) {
  		  var mdy = str.split('/')
   		 return new Date(mdy[2], mdy[0]-1, mdy[1]);
		}

		function daydiff(first, second) {
    		return (second-first)/(1000*60*60*24)
			}

function formatDate(date){
    var weekday=new Array(7);
     weekday[0]="Sun";
     weekday[1]="Mon";
     weekday[2]="Tue";
     weekday[3]="Wed";
     weekday[4]="Thu";
     weekday[5]="Fri";
     weekday[6]="Sat";
    
    var monthNames = [ "January", "February", "March", "April", "May", "June",
    "July", "August", "September",...