jquery 三个日期选择器在一起答案

【问题标题】：Jquery three datepickers togetherjquery 三个日期选择器在一起
【发布时间】：2017-12-27 15:27:10
【问题描述】：

我在左侧创建了 2 个日期选择器输入字段，第一个是 From 日期，第二个是 TO 日期，我还创建了一个带有 datepicker 类的 div在右侧显示日期选择器日历，因此对于前两个输入字段我使用这个

$(function() {
  $('#datepickerSickFrom').datepicker({
    dateFormat: 'dd/mm/yy',
    onSelect: function(dateText, inst) {
      $('#dateTo').datepicker('option', 'minDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
    }
  });

  $('#datepickerSickTo').datepicker({
    dateFormat: 'dd/mm/yy',
    onSelect: function(dateText, inst) {
      $('#dateFrom').datepicker('option', 'maxDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
    }
  });
});

现在我希望将这两个输入连接到我创建的第三个 datepicker div，我应该怎么做？

这是我的 HTML

<div class="group">
  <p class="inputIcon"><i class="fa fa-calendar" aria-hidden="true"></i></p>
  <input type="text" class="setLabel datepicker" placeholder="11/30/2017" id="datepickerSickFrom">
  <i class="fa fa-caret-down" style="position: absolute;right: 0;top: 17px;" aria-hidden="true"></i>
</div>
<div class="group">
  <p class="inputIcon"><i class="fa fa-calendar" aria-hidden="true"></i></p>
  <input type="text" class="setLabel datepicker" placeholder="11/30/2017" id="datepickerSickTo">
  <i class="fa fa-caret-down" style="position: absolute;right: 0;top: 17px;" aria-hidden="true"></i>
</div>
<div class="col-md-8">
  <div class="datepicker" id="sickPanelDatepicker"></div>
</div>

【问题讨论】：

“连接到第三个日期选择器”是什么意思？什么样的连接？
@Vivek 因此，当用户选择 FROM 日期然后选择 TO 日期时，它应该将 selectet 范围显示到我显示在 div 中的第三个日历中
我看到引用了 4 个日期选择器而不是 2 个
没有人可以“看到你想做什么”没有正确解释它是什么以及澄清为什么已经引用了 4 个日期选择器
当然......为什么会显示对其他 2 个日期选择器 dateTo 和 dateFrom 的引用？为什么你不能像那些参考文献那样做呢？

标签： javascript jquery datepicker jquery-ui-datepicker

【解决方案1】：

这段代码应该做你想做的事。

$(function() {

  $('#datepickerSickFrom').datepicker({
    dateFormat: 'dd/mm/yy',
    onSelect: function(dateText, inst) {
      $('#sickPanelDatepicker').datepicker('option', 'minDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
    }
  });
  $('#datepickerSickTo').datepicker({
    dateFormat: 'dd/mm/yy',
    onSelect: function(dateText, inst) {
      $('#sickPanelDatepicker').datepicker('option', 'maxDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
    }
  });
  $('#sickPanelDatepicker').datepicker({
    dateFormat: 'dd/mm/yy',

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="group">
  <p class="inputIcon"><i class="fa fa-calendar" aria-hidden="true"></i></p>
  <input type="text" class="setLabel datepicker" placeholder="11/30/2017" id="datepickerSickFrom">
  <i class="fa fa-caret-down" style="position: absolute;right: 0;top: 17px;" aria-hidden="true"></i>
</div>
<div class="group">
  <p class="inputIcon"><i class="fa fa-calendar" aria-hidden="true"></i></p>
  <input type="text" class="setLabel datepicker" placeholder="11/30/2017" id="datepickerSickTo">
  <i class="fa fa-caret-down" style="position: absolute;right: 0;top: 17px;" aria-hidden="true"></i>
</div>
<div class="col-md-8">
  <br><br><br>
  <div class="datepicker" id="sickPanelDatepicker"></div>
</div>

【讨论】：

如果我从 sickPanelDatepicker 更改从和到日期，这也应该有效