我在左侧创建了2个datepicker输入字段,第一个是从日期,第二个是 TO 日期,我还创建了一个带有{{1}类的div在右侧显示datepicker日历,因此对于我使用此
的前两个输入字段datepicker
现在我希望将这两个输入连接到我创建的第三个datepicker div中,我怎么想这样做?
这是我的HTML
$(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));
}
});
});
答案 0 :(得分: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>
&#13;