Bootstrap datetimepicker minDate and maxDate cannot updated on click event

Question

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 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 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.

Aren't your question is duplicate for: http://stackoverflow.com/questions/5375373/jquery-datetime-picker-set-mindate-dynamic ? — Dmitry, Dec 25 '15 at 02:30
No. Please try to understand my problem. Here i have just only one input and minDate/maxDate must be on the same datetimepocher. — Codinga, Dec 25 '15 at 02:42
IMHO - that question contains everything you need. As I posted below - you can't initialize datetimepicker twice on same element - second call will be simply ignored. Instead you need to alter properties of initialized widget. I'll update code to fit you requirements. — Dmitry, Dec 25 '15 at 02:56
I updated my answer to make it relevant for bootstrap datetimepicker. — Dmitry, Dec 25 '15 at 03:46

Dmitry · Accepted Answer · 2015-12-25T03:47:40.627

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:

Destroy previous datetimepicker and re-initialize new one (bad solution)
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.

I test it here but it not working : http://jsfiddle.net/Lx3frLft/110/. I'm using bootstrap datetimepicker. Not jquery datepicker. — Codinga, Dec 25 '15 at 02:57
Can you test it in my jsfiddle? I test it but it doesn't work — Codinga, Dec 25 '15 at 03:12

Bootstrap datetimepicker minDate and maxDate cannot updated on click event

1 Answers1