Bootstrap datetimepicker minDate 和 maxDate 无法在点击事件时更新

Question

我寻找解决方案一天多了，但没有成功。单击拆分按钮后，我需要将 minDate 和 maxDate 设置为我的日期时间选择器。

HTML 部分：

<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 部分：

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,
      });

});

我创建了一个包含所有这些的 jsfiddle 来帮助您理解我的问题：http://jsfiddle.net/Lx3frLft/102/。问题是，当我单击 table 的其他行时，无法更改 datetimepicker 的 minDate 和 maxDate 的值。任何形式的帮助将不胜感激。

Answer 1

一旦初始化 datetimepicker 就不能通过在同一元素上调用 .datetimepicker(options) 来重新初始化。相反，您可以通过多条路径来归档动态更新：

销毁以前的日期时间选择器并重新初始化新的（错误的解决方案）
调用 API 方法来改变属性。像这样：

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

注意：因为你想同时改变它们 - 你可能会遇到错误 - 比如 "minDate should be before maxDate" 而在改变的过程中。对于这种情况，最好使用 .options(options) 方法来批量更改它们。

所以你的代码应该是这样的：

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

这里是link到fiddle。

注意：我在您的 table 原始文件中更新了日期，因为您在处理有效切换日期和月份的日期时遇到了一些错误，这可能会导致 minDate 晚于 maxDate。这将阻止演示工作。

Bootstrap datetimepicker minDate 和 maxDate 无法在点击事件时更新

Bootstrap datetimepicker minDate and maxDate cannot updated on click event

javascript

jquery

datetimepicker

twitter-bootstrap