jQuery + Bootstrap DatePicker：如何让两个日期选择器输入相互更新？

Question

我在一个项目中使用this Bootstrap 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 次。

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

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