如何创建两个日历并使用JavaScript将它们链接在一起

Question

我正在使用LightPick日历。
它工作正常，但是我需要实现的功能是在同一页面上制作两个日历并将它们链接在一起。 我希望它们都内联日历。 我只想在该日历中选择范围。 例如，我想在任一日历中选择一个范围，第二个日历也应更新其值。

目前，我在一页上有两个日历，并尝试将它们链接在一起

// HTML文件

                  <div class="card">
                      <div class="card-body">
                          <div class="row">
                              <div class="col-md-5">
                                  <p id="cal-result-2">&nbsp;</p>
                                  <input type="text" id="calendar-2" class="form-control form-control-sm" style="display: none;"/>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <p class="lead">Calendar 3 - Select Range</p>
                  <div class="card">
                      <div class="card-body">
                          <div class="row">
                              <div class="col-md-5">
                                  <p id="cal-result-3">&nbsp;</p>
                                  <input type="text" id="calendar-3" class="form-control form-control-sm" style="display: none;"/>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>




// JS File
// calendar-2
new Lightpick({
  field: document.getElementById('calendar-2'),
  inline: true,
  singleDate: false,
  selectForward: true,
  onSelect: function(start, end){
      document.getElementById('cal-result-3').innerHTML = rangeText(start, end);
      document.getElementById('cal-result-2').innerHTML = rangeText(start, end);
  }
});


// calendar-3
new Lightpick({
  field: document.getElementById('calendar-3'),
  inline: true,
  singleDate: false,
  selectForward: true,
  onSelect: function(start, end){
      document.getElementById('cal-result-2').innerHTML = rangeText(start, end);
      document.getElementById('cal-result-3').innerHTML = rangeText(start, end);
  }
});

但它们是文本html中的更新值，而不是实时内联日历中的值。 我需要链接这些日历的帮助。
我需要链接这些日历的帮助。

看到这个检查OutPut

Answer 1

daterange选择器站点具有用于链接日历的演示链接，如图中所示，这是演示站点内容的链接https://github.com/dangrossman/daterangepicker