JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://themicon.co/theme/angle/v3.2/backend-jquery/app/js/app.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<table id="tablePeriodes" class="table table-hover" align="center" cellpadding="3" cellspacing="1" width="100%">
  <thead>
    <tr valign="top">
      <th align="center" width="45%"><b>Start</b></th>
      <th align="center" width="45%"><b>End</b></th>
      <th align="center" width="10%"><b>Actions</b></th>
    </tr>
  </thead>
  <tbody>
    <tr id="1" valign="top">
      <td id="debut:1">01/01</td>
      <td id="fin:1">10/6</td>
      <td id="actions:1">
        <a href="#" class="split" data-debut="01/01" data-fin="10/6"><em class="fa fa-pencil"></em> Diviser </a>
      </td>
    </tr>
    <tr id="124" valign="top">
      <td id="debut:124">09/09</td>
      <td id="fin:124">12/12</td>
      <td id="actions:124">
        <a href="#" class="split" data-debut="11/6" data-fin="31/12"><em class="fa fa-pencil"></em> Diviser </a>
      </td>
    </tr>
  </tbody>
</table>

<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" data-dismiss="modal" aria-label="Close" class="close">
          <span aria-hidden="true">&times;</span>
        </button>
     ...

CSS

body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
  overflow-y: scroll;
}

@media (max-width: 979px) {
  .modal-open .page-container .navbar-fixed-top {
    overflow-y: visible;
  }
}

JavaScript

var $table = $('table#tablePeriodes');
  
function tojsDate(date){
  var date = new Date(date);
  return (date.getMonth() + 1) + '/' + date.getDate() + '/' +  date.getFullYear();
}

function frtoen(date){
  var parts = date.split("/"); 
  return parts['1'] + '/' + parts['0'] + '/' +  parts['2'];
}

function addDays(date, days) {
    var result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
}

function removeDays(date, days) {
    var result = new Date(date);
    result.setDate(result.getDate() - days);
    return result;
}



$('#dateperiode').datetimepicker({
   ignoreReadonly: true,
   format: 'DD/MM',
});

$table.on('click', 'a.split', function() {
  jQuery('#myModal').modal('show', {
    backdrop: 'static'
  });

  var year = new Date().getFullYear();
  var id = $(this).closest('tr').attr('id');
  var firstLineDebut = document.getElementById("debut:" + id).innerHTML;
  var firstLineFin = document.getElementById("fin:" + id).innerHTML;
  firstLineDebut = firstLineDebut + '/' + year;
  firstLineDebut = frtoen(firstLineDebut);
  var minDateVar = tojsDate(addDays(firstLineDebut, 1));
  var defaultdate = addDays(minDateVar, 1);
  firstLineFin = firstLineFin + '/' + year;
  firstLineFin = frtoen(firstLineFin);
  var maxDateVar = tojsDate(removeDays(firstLineFin, 1));

  $(".modal-body #firstLineid").val(id);

  $('#dateperiode').data("DateTimePicker").options({minDate: minDateVar, maxDate:maxDateVar});

});