Question

我在项目中使用this Bootstrap Datepicker工具，我有两个datepicker字段。我需要它，以便当你在一个中选择一个日期时，它会将另一个更新为相同的日期。

<input class="datepicker" type="text" id="date1">
<input class="datepicker" type="text" id="date2">

<script>
  $("#date1").datepicker();
  $("#date2").datepicker();
</script>

以下是一些更新它的jQuery：

$("#date1").change(function() {
  var value = $(this).val();
  $("#date2").datepicker("update", value);
});

$("#date2").change(function() {
  var value = $(this).val();
  $("#date1").datepicker("update", value);
});

但是，datepicker('update', value)函数会导致change事件再次触发，从而导致无限循环。有这个功能的正确/正确方法是什么？

Answer 1

我提出了这个解决方案：

var update1 = false;
var update2 = false;

$("#date1").change(function() {
  var value = $(this).val();
  if (!update1) {
    update2 = true;
    $("#date2").datepicker("update", value);
  }

  update1 = false;
});

$("#date2").change(function() {
  var value = $(this).val();
  if (!update2) {
    update1 = true;
    $("#date1").datepicker("update", value);
  }

  update2 = false;
});

这就是我想要的，但我不确定这是否是正确/最好的方式。

Answer 2

我发现变更事件有问题。我所做的就是使用.on。

$('#datepicker2').datepicker('setDate', dateToday);
$('#datepicker2').datepicker().on('changeDate', function (e) {
    toDate = $('#datepicker2').val().toString();
    if (toDate < fromDate) {
        fromDate = (new Date(toDate).getMonth() + 1) + "/01/" + new  Date(toDate).getFullYear();
        $('#datepicker1').datepicker('setDate', fromDate);
    }
      });

Answer 3

是的，显然bootstrap-datepicker存在很大的递归问题，这不会影响jQuery UI Datepicker。以下代码可以防止递归，但changeDate事件仍然会触发3或4次。

＆＃13;

function datePickerInit(sel) {
  sel = $(sel);
  $(sel).each(function() {
    $(this).datepicker().on("change", function() {
      console.log("change date");
      sel.datepicker("remove");
      sel.siblings(".datepicker").val($(this).val());
      setTimeout(function() {
        datePickerInit(".datepicker");
      }, 100);
    });
  });
}
$(document).ready(function() {
  datePickerInit(".datepicker");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<input class="datepicker" type="text" id="date1">
<input class="datepicker" type="text" id="date2">

＆＃13;

jQuery + Bootstrap DatePicker：如何让两个datepicker输入相互更新？

3 个答案: