javascript - 选择月份后隐藏日期选择器

Question

将 Datepicker 用于 Bootstrap 我想将 View 模式限制为几个月，这工作正常但我想在选择月份时隐藏下拉菜单。

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/datepicker.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>


$(function(){
    $('#dp3').datepicker()
});

HTML

<div class="col-xs-6">
    <div class="input-append date input-group" id="dp3"  data-date="102/2012" data-date-format="mm/yyyy" data-date-viewmode="years" data-date-minviewmode="months">
    <input class="span2 form-control" size="16" type="text" value="02/2012">
    <span class="add-on input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
    </div>
    </div>

这里是 http://jsfiddle.net/ded3v/6/

Answer 1

您可以捕获点击事件:

document.addEventListener("click", function(e){
    if($(e.target).is('.month')) $(e.target).closest('.datepicker.dropdown-menu').hide();
}, true);

DEMO capture

插件停止 .month 元素上的点击传播，你不能委托(delegate)点击事件，你仍然可以使用下面的代码(委托(delegate) dblclick 事件)来关闭 dblclick 上的日期选择器(我建议你使用这种方法以获得更好的 UI体验!):

$(document).on('dblclick','.month',function(){
    $(this).closest('.datepicker.dropdown-menu').hide();
});

DEMO dblclick