JSFiddle - React, Tailwind, and code Playground

by ramstheroyal

HTML

<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 </head>
<!-- onLoad="loadDatePicker()" -->
 <body>
  
  Date: <input type="text" readonly onClick="showDatePicker(2010,2,2010,8);"/><br/>

  <div id="DatePickerContainer">
   <div id="DatePickerContainerHdr"><span>Maintain Dates</span></div>
   <div id="DatePickerContainerClose"><img src="close_black_white.png" title="Close" alt="Close"/></div>

   <div id="DatePickerContainerBody"> 
   
   </div> <!-- id="DatePickerContainerBody" -->
  </div><!-- id="DatePickerContainer" -->

 </body>
 <script>

 </script>
</html>

CSS

#DatePickerContainerHdr,.DatePickerHdr,.DatePickerBody table{
  font-size:0.75em;
  font-family:Arail,Tahoma,Sans-serif;
  }
 #DatePickerContainer{
  border:1px solid #7D9AB9;
  border-radius:8px;
  width:700px;
  height:200px;
  position:absolute;
  filter:PROGID:DXImageTransform.Microsoft.DropShadow(Color='#bfbfbf', OffX=4, OffY=3);
 }
img{
 border:none;
}
#DatePickerContainerHdr{
 width:100%;
 color:#4b4b4b;
 height:20px;
 background:#BAD5EB;
 filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f3f8fd', EndColorStr='#D2E5FB');
 font-weight:bold;
 border-radius:8px 8px 0px 0px;
 border-bottom:1px solid #7D9AB9;
 display:table;
 padding-left:4px;
}
#DatePickerContainerClose{
 position:absolute;
 top:2px;
 right:2px;
}
#DatePickerContainerBody{
 width:700px;
 overflow:auto;
 height:178px;
}
#DatePickerContainerBody td{
 vertical-align:top;
}
#DatePickerContainerHdr span{
 display:table-cell;
 vertical-align:bottom;
}
 .DatePicker{
   width:200px;
 }
  
 .DatePickerHdr{
   background:#737373;
   border-bottom:1px solid #7D9AB9;
 }
.DatePickerHdr table{
font-size:0.9em;
font-family:Arail,Tahoma,Sans-serif;
font-weight:bold;
color:#fff;
width:100%;
}
.DatePickerHdr table td{
 width:50%;
}
.DatePicker_Month{
 text-align:right;
 padding-right:2px;
}

.DatePicker_Year{
 text-align:left; 
 padding-left:2px;
}

.DatePickerBody table{
 border-spacing:2px; 
}

.DatePickerBody th{
font-size:0.73em;
 }
.DatePickerBody td{
border:1px solid black;
width:40px;
padding-left:3px;
cursor:pointer;
}

JavaScript

var output;
var start_day;
var year;
var tableBgColor;
var selectedDates;
var months=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

function loadDatePicker(fromYear,fromMonth,toYear,toMonth)
{
 output='<table cellpadding=0 cellspacing=0><tr>';
 prepareDatePicker(fromYear,fromMonth,toYear,toMonth);
 output = output+"</tr></table>";

 //Set to DatePicker to Container Body
  $('#DatePickerContainerBody').html(output);
 
 //Hide months of Starting year which are below from month
 for(i=1;i<fromMonth;i++)
 {
   var monthName = months[i-1];
   var tagId = 'DP_'+monthName+'_'+fromYear;
   $('#'+tagId).hide();
 }
 
 //Hide months of Ending year which are above to toMonth
 for(i=toMonth;i<=12;i++)
 {
   var monthName = months[i];
   var tagId = 'DP_'+monthName+'_'+toYear;
   $('#'+tagId).hide();
 }

 //Show DatePicker
 $('#DatePickerContainer').show('slow');

}


function prepareDatePicker(fromYear,fromMonth,toYear,toMonth){
    
    for(year=fromYear;year<=toYear;year++)
    {
        date= new Date(year+"January 1");
        start_day = date.getDay()+1 ; // starts with 0
    
         for(j=0;j<=11;j++)
         {
            if(j%2==0)
              tableBgColor = '#FFF';
            else 
              tableBgColor = '#E8EAEA';
           fill_table(months[j],findMonthLength(j));
         }
     }
}
function findMonthLength(month){
 switch(month)
    {
     case 0: return 31;
             break;

     case 1: if(year % 4 == 0)
             {
               if (year % 100 == 0)
               { 
                 if(year % 400 == 0) 
                     return 29;  
                 else return 28;
                }
               else{return 29; }
             }
             else 
             { 
              return 28;
             }
             break;
     case 2: return 31;
             break;
     case 3:return 30         
             break;
     case 4: return 31;
             break;
 ...