[英]How to create Two calendars and link them together using JavaScript
I am using LightPick Calendar. 我正在使用LightPick日历。
It is working fine, but the feature i need to implement is to make two calendars on same page and link them together. 它工作正常,但是我需要实现的功能是在同一页面上制作两个日历并将它们链接在一起。 I want both of them inlined calendars.
我希望它们都内联日历。 I only want to select range in that calendars.
我只想在该日历中选择范围。 For example, I want to select a range in either of calendars the 2nd calendar should update its value too.
例如,我想在任一日历中选择一个范围,第二个日历也应更新其值。
Currently I have two calendars on one page and I tried to link them together 目前,我在一页上有两个日历,并尝试将它们链接在一起
//HTML FILE // HTML文件
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-5">
<p id="cal-result-2"> </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"> </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);
}
});
but they are updaing values in text html but not in real time inlined calendars. 但它们是文本html中的更新值,而不是实时内联日历中的值。 I want help in linking those calendars.
我需要链接这些日历的帮助。
I want help in linking those calendars. 我需要链接这些日历的帮助。
daterange picker site has demo link for linked calendars as shown in the image, here is the link for demo site content https://github.com/dangrossman/daterangepicker daterange选择器站点具有用于链接日历的演示链接,如图中所示,这是演示站点内容的链接https://github.com/dangrossman/daterangepicker
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.