Jquery的3个datepickers一起

-2

我创建2个日期选择器输入字段上的左侧，第一是从日期，第二个是TO日期和我还创建与datepicker类一个div显示在右侧日期选择日历，以便前两个输入字段我用这个Jquery的3个datepickers一起

$(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)); 
    } 
    }); 
});

，现在我想这两个输入要连接到我创建的第三日期选择器的div，我怎么想这样做呢？

这是我的HTML

<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"> 
    <div class="datepicker" id="sickPanelDatepicker"></div> 
</div>

来源

2017-12-27 andrew

你说的 “连接到第三日期选择器” 是什么意思？什么样的连接？ – Vivek

@Vivek所以当用户选择FROM日期，然后选择TO日期，它应该显示选择范围到第三个日历，我显示到div – andrew

我看到引用4日期选择器不是2 – charlietfl

此代码应该做你想要做什么。

$(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>

来源

2017-12-27 16:24:55 Vivek

这应该也工作，如果我改变从** sickPanelDatepicker从**和日期** – andrew

Jquery的3个datepickers一起

回答

相关问题