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

【问题标题】：How to create Two calendars and link them together using JavaScript如何使用 JavaScript 创建两个日历并将它们链接在一起
【发布时间】：2019-12-19 15:19:12
【问题描述】：

我正在使用 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 中的值，而不是实时内联日历中的值。我需要帮助来链接这些日历。
我需要帮助来链接这些日历。

See this to check OutPut

【问题讨论】：

标签： javascript calendar date-range daterangepicker jscalendar

【解决方案1】：

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

【讨论】：

他没有使用那个日历，他使用的是 Lightpick。