JSFiddle - React, Tailwind, and code Playground

by Alexander Schwarzmann

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/bootstrap-datetimepicker/css/datetimepicker.css">
<script src="http://vitalets.github.io/x-editable/assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<table>
<tr>
  <td><span class='time' data-type='datetime' data-pk='1'>1617-07-23 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1830-09-24 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1445-12-19 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1387-05-02 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1505-09-18 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1397-05-03 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1094-04-04 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1296-02-12 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1528-03-05 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1140-09-25 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1837-07-09 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1009-08-17 01:02</span></td>
  <td><span class='time' data-type='datetime' data-pk='1'>1328-05-10 01:02</span></td>
  <td><span class='time'...

CSS

table td {
    width: 100px;
    white-space: nowrap;
    padding: 10px;
}

JavaScript

$('.time').editable({
    type: 'datetime',
    url: 'http://jsonplaceholder.typicode.com/posts/1',
    format : 'yyyy-mm-dd hh:ii',
    viewformat : 'yyyy-mm-dd hh:ii',
    inputclass : "datepick",
    placement: function (context, source) {
      var popupWidth = 336;
      if(($(window).scrollLeft() + popupWidth) > $(source).offset().left){
        return "right";
      } else {
        return "left";
      }
    },
    emptytext: '...',
    datetimepicker : {
      weekStart : 1
    }
});