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一起

回答

相關問題