Bootstrap datetimepicker minDate and maxDate cannot updated on click event

Ad

I looking for a solution more than one day but with no success. I need to set the minDate and maxDate to my datetimepicker after click to split button.

HTML Part :

<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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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">11/6</td>
      <td id="fin:124">31/12</td>
      <td id="actions:124">
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-sm-12">
              <div class='col-sm-6 col-sm-offset-3'>
                <div class="form-group">
                  <div class='input-group date' id='dateperiode'>
                    <input type='text' class="form-control" readonly />
                    <span class="input-group-addon">
                      <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Javascript Part :

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;
}
$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').datetimepicker({
        ignoreReadonly: true,
        format: 'DD/MM',
        minDate: minDateVar,
        maxDate: maxDateVar,
        //defaultDate: defaultdate,
      });

});

I created a jsfiddle that contain all this to help you understand my problem : http://jsfiddle.net/Lx3frLft/102/. The problem is that the values of minDate and maxDate of the datetimepicker can't be changed when i click an other ligne of my table. Any kind of help will be appreciated.

Ad

Answer

Ad

Once initialized datetimepicker can't be re-initialized by invoking .datetimepicker(options) on the same element. Instead you have several path to follow to archive dynamic updates:

  1. Destroy previous datetimepicker and re-initialize new one (bad solution)
  2. Invoke API method to alter property. Like this:

    $('#dateperiode').data("DateTimePicker").minDate("05/05/2015")

Note: since you want to alter them both - you may experience error - like "minDate should be before maxDate" while in the middle of alteration. For this case it is better to use .options(options) method to alter them in bulk.

So your code should be like this:

$('#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});   
});

Here is link to fiddle.

Note: I updated dates in your table raws cause you have some bugs while dealing with dates effectively switching days and month which may result in the fact that minDate is after maxDate. This will prevent demo from working.

Ad
source: stackoverflow.com
Ad