JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

<input class="irmNDatePickerBox" value="Click"/>
<div id="dp">    
</div>

CSS

body{
  font-family:Arial,Tahoma,Sans-serif;
  font-size:0.7em;
  }
   #DatePickerContainer{
    width:155px;
    border:1px solid #4d4d4d;
    border-radius:5px;
    box-shadow:3px 3px 3px #888;    
   }
  #DatePickerContainer table{
   width:100%;
  }
  #DatePickerHdr {
   background:#787878;
   border-radius:4px 4px 0px 0px;
   border-bottom:1px solid #4d4d4d;
  }

  #DatePickerHdr table td{
   padding:3px 0px 3px 0px;
   vertical-align:middle;
  }

  #DatePickerHdr table td:first-child,#DatePickerHdr table td:last-child{
   border:1px solid black;
   text-align:center;
   width:10%;
   border-radius:15px;   
   cursor:pointer;
  }
  #DatePickerHdr table td:first-child:hover,#DatePickerHdr table td:last-child:hover{
   background:#b1b1b1;
  }
  #DatePickerHdr table td[id^='DP_MONTH'],#DatePickerHdr table td[id^='DP_YEAR']{
   width:40%;
   font-weight:bold;
   color:#fff;
  }
  
  #DatePickerHdr table td[id^='DP_MONTH']{
    text-align:right;
    padding-right:4px;
    width:40%;
  }
  
  #DatePickerHdr table td[id^='DP_YEAR']{
    text-align:left;
    padding-left:4px;
  }
  #DatePickerHdr table td:last-child{
 
  }
  #DatePickerBody table td:not(.NoDate){
   border-spacing:2px;
   border:1px solid #bfbfbf;
   padding:1px 0px 1px 0px;
   text-align:center;
   cursor:pointer
  }
  #DatePickerBody table td:not(.NoDate):hover{
   background:#ffffb0;
  }

JavaScript

var dpBoxId,dpInputId,dpBtnId,dpDateObj,dpToDate,dpToDay,dpYear,dpMonth,outStr;
 var monthArray = new Array('January','February','March','April','May','June','July','August','September','October','November','December');


    $('.irmNDatePickerBox').click(function(){
       //dpBoxId = $(this).attr('id');
       //dpInputId = 'dp-ip-'+dpBoxId.split('-')[2];
       //dpBtnId = 'dp-btn-'+dpBoxId.split('-')[2];

       dpDateObj = new Date();    
       dpToDate  = dpDateObj.getDate();//Gives Index of the day such as Sun,Mon...etc
       dpMonth   = monthArray[dpDateObj.getMonth()];
       dpYear    = dpDateObj.getFullYear();

       prepareIrmNDatePicker(dpMonth,dpYear);
});//End of $('.irmNDatePickerBox').click

    function prepareIrmNDatePicker(_month,_year){
      var id,date=1,monthName,noDaysPerMonth;
      dpDateObj = new Date(_year+" "+_month+" 1");
      dpToDay  = dpDateObj.getDay()+1;//Starts from 0
      dpMonth  = dpDateObj.getMonth()+1;//Starts from 0
      dpYear   = dpDateObj.getFullYear();

     outStr = '<div id="DatePickerContainer">';
     /*Header Prepare*/
     outStr = outStr+ '<div id="DatePickerHdr">'
                    + '<table>'
                    + '<tr>'
                    + '<td id="DP_PREV"><img src="Prev.gif"/></td>';
    
     monthName = monthArray[dpMonth-1];
     outStr = outStr+ '<td id="DP_MONTH">'+ monthName +'</td>';
            
     outStr = outStr+ '<td id="DP_YEAR">'+ dpYear+'</td>';
     outStr = outStr+ '<td id="DP_NEXT"><img src="Next.gif"/></td>'
                    + '</tr>'
                    + '</table>'
                    + '</div>';
    /*Body Prepare*/
    outStr = outStr+ '<div id="DatePickerBody">'      
                   + '<table>';
    outStr = outStr+ '<tr><th>SU</th><th>MO</th><th>TU</th><th>WE</th><th>TH</th><th>FR</th><th>SA</th></tr>';
    
    /*Prepare first row*/
    outStr = outStr+ '<tr>';
     for(var i=1;i<=7;i++)
     {
          if(i<dpToDay){//Prepare empty cells
            outStr =...