Jquery UI Skeleton

by aminur

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="datepicker"></div>

CSS

thead,tbody
{
  float:left;
}
tr
{
  height:36px;
}

JavaScript

$( function() {
    $( "#datepicker" ).datepicker();
    transposeTable();
  } );
  
  function transposeTable(){
  transposeTableHeader();
  transposeTableBody();
  }
  
  function transposeTableBody(){
  var t = $('.ui-datepicker-calendar tbody').eq(0);
    var r = t.find('tr');
    var cols= r.length;
    var rows= r.eq(0).find('td').length;
    var cell, next, tem, i = 0;
    var tb= $('<tbody></tbody>');

    while(i<rows){
        cell= 0;
        tem= $('<tr></tr>');
        while(cell<cols){
            next= r.eq(cell++).find('td').eq(0);
            tem.append(next);
        }
        tb.append(tem);
        ++i;
    }
    $('.ui-datepicker-calendar').append(tb);
    $('.ui-datepicker-calendar').show();
  }
  
  function transposeTableHeader(){
  var t = $('.ui-datepicker-calendar thead').eq(0);
    var r = t.find('tr');
    var cols= r.length;
    var rows= r.eq(0).find('th').length;
    var cell, next, tem, i = 0;
    var th=$('<thead></thead>');

    while(i<rows){
        cell= 0;
        tem= $('<tr></tr>');
        while(cell<cols){
            next= r.eq(cell++).find('th').eq(0);
            tem.append(next);
        }
        th.append(tem);
        ++i;
    }
    $('.ui-datepicker-calendar').append(th);
    $('.ui-datepicker-calendar').show();
  }