JSFiddle - React, Tailwind, and code Playground

by RobertSudwarts

HTML

<link rel="stylesheet" href="http://datatables.net/release-datatables/media/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="http://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<table id="tbl-date-range" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <td>id</td>
      <td>from</td>
      <td>to</td>
      <td>n_days</td>
    </tr>
  </thead>
  <tbody></tbody>
</table>

CSS

.datepicker{z-index:1151 !important;}

JavaScript

var tbldata = [
 {"date_from": 1428274800.0, "date_to": 1435705200.0, "n_days": 63, "id": 1}, 
 {"date_from": 1420416000.0, "date_to": 1427414400.0, "n_days": 60, "id": 2}, 
 {"date_from": 1389225600.0, "date_to": 1397689200.0, "n_days": 71, "id": 3}, 
 {"date_from": 1367362800.0, "date_to": 1375225200.0, "n_days": 66, "id": 4}, 
 {"date_from": 1357516800.0, "date_to": 1365980400.0, "n_days": 71, "id": 5}
];

$('#tbl-date-range').DataTable({
    dom: 'T<"clear">rt',
    data: tbldata,
    columns: [
        {data: 'id'}, 
        {data: 'date_from'}, 
        {data: 'date_to'}, 
        {data: 'n_days'}
    ],
    columnDefs : [
      {  
        // render date columns using moment
        targets: [1, 2],
        render: function (data, type, row) {
            // dates are passed in as timestamps
            // if display or filter data is requested, format the date
            if ( type === 'display' || type === 'filter' ) {
              return moment(data, 'X').format('DD-MMM-YYYY');
            }
            // otherwise return the timestamp -- hence sort works
            return data;
        }
      },
    ],
    tableTools: {
      sRowSelect: "single",
      aButtons: [
        {
          sExtends: "text",
          sNewLine: "<clear>",
          sButtonText: "edit",
          fnClick: function(e){  
            row_data = this.fnGetSelectedData()[0];
            if ( row_data ) {
              console.log("[edit button's fnClick()]: ", JSON.stringify(row_data));
              ko.mapping.fromJS(row_data, {}, viewModel);
              
              var mdl = ko.dataFor(document.body);
              console.log("current_model", mdl);
              console.log("[moment] dlg_date_from", mdl.dlg_date_from().format('DD-MMM-YYYY'));
              console.log("[moment] dlg_date_to", mdl.dlg_date_to().format('DD-MMM-YYYY')); 
            }
          },
       }, 
    ],
  }                       
});

function vm(){
    var self = this;
    
    self.date_from...