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

我需要帮助来链接那些日历。

See this to check OutPut

Answer 1

​

​

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