在引导日期选择器中更改所有日期选择器的更改日期答案

【问题标题】：On change change date of all date picker in bootstrap date picker在引导日期选择器中更改所有日期选择器的更改日期
【发布时间】：2016-07-28 13:28:44
【问题描述】：

我在更改每个日期选择器时使用 3 个日期选择器，我需要更改所有日期选择器。例如如果我在第一个日期选择器中选择 8 月 10 日，它应该在所有日期选择器中更改为 8 月 1 日。如果我在第二个日期选择器中更改 8 月 10 日，它应该在所有日期选择器中更改为 8 月 10 日。

这是我的代码：

<input  name="start" class="date_picker  form-control" id='from_one' type="text" />
<input class="date_picker form-control" id='from_two'  name="start" type="text"  />
<input class="date_picker form-control" name="end" type="text"  id='from_three'/>

$('.date_picker').datepicker({
  setDate: new Date(),
  format: 'dd/mm/yyyy',
  todayHighlight: true,
  autoclose: true,
  startDate: '-0m',
  minDate: 0,
  onSelect: function(text, dt) {     
    var secondDate = new Date($(".date_picker").datepicker("getDate"));
    var date2 = new Date(secondDate.getTime());
    date2.setDate(date2.getDate());
    $("#from_one").datepicker("setDate", date2);
    $("#from_two").datepicker("setDate", date2);
    $("#from_three").datepicker("setDate", date2);
  }
});

它可以工作，但在更改第二个日期选择器时，它会采用第一个日期选择器的值

这是我的演示 fiddle

【问题讨论】：

无法理解如果第一个日期选择器选择日期 8 月 1 日，那么第二个日期选择器日期会是？在ex.中解释。
用这个改变 onSelect 函数： onSelect: function(text) { $("#from_one").datepicker("setDate", text); $("#from_two").datepicker("setDate", text); $("#from_three").datepicker("setDate", text); }

标签： javascript jquery twitter-bootstrap datepicker

【解决方案1】：

据我了解你想要完成的，这应该适合你。

$('.date_picker').datepicker({
  setDate: new Date(),
  format: 'dd/mm/yyyy',
  todayHighlight: true,
  autoclose: true,
  startDate: '-0m',
  minDate: 0,
  onSelect: function(text, dt) {
    var selectedPicker = this;
    var datepickers = $(".date_picker");
    var secondDate = $(this).datepicker("getDate");
    var date2 = new Date(secondDate.getTime());
    date2.setDate(date2.getDate() + 1);

    $.each(datepickers, function(index, value) {
      if (value !== selectedPicker) {
        $(value).datepicker("setDate", date2);
      }
    })
  }
});

<link href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<input name="start" class="date_picker  form-control" id='from_one' data-date-format="dd/mm/yyyy" type="text" />
<input class="date_picker form-control" id='from_two' name="start" type="text" data-date-format="dd/mm/yyyy" />
<input class="date_picker form-control" name="end" type="text" id='from_three' />

【讨论】：