Jquery的3个datepickers一起

  • Z时代
  • 2024-01-10
  • 分类：问答

我创建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>

回答：

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

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

以上是 Jquery的3个datepickers一起 的全部内容， 来源链接： utcz.com/qa/266034.html

回到顶部