我正在使用bootstrap来开发一个站点,我需要一个表单在我的顶级导航中的下拉列表中.
这工作正常但我还必须在其中一个字段中使用日期选择器,当用户选择不同的月份时,父下拉菜单关闭.
我喜欢它,以便你可以点击日期选择器内的任何地方而不关闭下拉列表.
或者,可以更改下拉列表,使其仅在单击导航链接时打开和关闭,而不是在单击任何位置时关闭.
jsfiddle here – http://jsfiddle.net/ackuu/
谢谢你的帮助！！
HTML
<div class="navbar txt-grey" role="navigation">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Dropdown</b><b class="caret"></b></a>
<ul class="dropdown-menu">
<form method="POST" class="form">
<div class="field clear">
Date
<input type="text" name="p_start_date" id="datepicker" class="input datepicker" placeholder="Select date" />
</div>
<button type="submit" name="res_submit">Go</button>
</form>
</ul>
</li>
</ul>
</div>
</div>
JS
$().ready(function(){
$(".datepicker").datepicker({
dateFormat : 'dd-mm-yy',firstDay : 1,minDate : 1,showOtherMonths : true,selectOtherMonths : true
});
});
解决方法
下面的代码适合我.
$().ready(function(){
$(".datepicker").datepicker({
dateFormat : 'dd-mm-yy',firstDay : 1,// sets first day of the week to Monday
minDate : 1,// sets first available date in calendar to tomorrow's date
showOtherMonths : true,// displays days at beginning or end of adjacent months
selectOtherMonths : true
}).click( function() {
$('#ui-datepicker-div').click(function(e){
e.stopPropagation();
});
});
});
