Question

我寻找解决方案超过一天但没有成功。我需要在点击拆分按钮后将minDate和maxDate设置为我的datetimepicker。

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

});

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

Answer 1

初始化的datetimepicker无法通过在同一元素上调用.datetimepicker(options)来重新初始化。相反，您有几条路径可以跟踪归档动态更新：

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

$（ '＃dateperiode'）。数据（ “的DateTimePicker”）。的minDate（ “2015年5月5日”）

注意：既然你想要改变它们 - 你可能会遇到错误 - 比如在更改过程中“minDate应该在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});   
});

以下是fiddle的链接。

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

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

1 个答案: