Question

使用Datepicker进行Bootstrap我想将视图模式限制为工作正常的月份，但我想在选择月份时隐藏下拉列表。

<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元素上停止点击传播，你不能委托点击事件，你仍然可以使用下面的代码（委托dblclick事件）来关闭dblclick上的datepicker（我建议你使用这个方法来获得更好的UI体验）：

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

DEMO dblclick

Answer 2

将datepicker Js下载到本地服务器并用以下内容替换click功能：

click: function(e) {
            e.stopPropagation();
            e.preventDefault();
            var target = $(e.target).closest('span, td, th');
            if (target.length === 1) {
                switch(target[0].nodeName.toLowerCase()) {
                    case 'th':
                        switch(target[0].className) {
                            case 'switch':
                                this.showMode(1);
                                break;
                            case 'prev':
                            case 'next':
                                this.viewDate['set'+DPGlobal.modes[this.viewMode].navFnc].call(
                                    this.viewDate,
                                    this.viewDate['get'+DPGlobal.modes[this.viewMode].navFnc].call(this.viewDate) + 
                                    DPGlobal.modes[this.viewMode].navStep * (target[0].className === 'prev' ? -1 : 1)
                                );
                                this.fill();
                                this.set();
                                break;
                        }
                        break;
                    case 'span':
                        if (target.is('.month')) {
                            var month = target.parent().find('span').index(target);
                            this.viewDate.setMonth(month);
                            this.element.trigger({type: 'monthSelected', month: month});
                        } else {
                            var year = parseInt(target.text(), 10)||0;
                            this.viewDate.setFullYear(year);
                        }
                        if (this.viewMode !== 0) {
                            this.date = new Date(this.viewDate);
                            this.element.trigger({
                                type: 'changeDate',
                                date: this.date,
                                viewMode: DPGlobal.modes[this.viewMode].clsName
                            });
                        }
                        this.showMode(-1);
                        this.fill();
                        this.set();
                        break;
                    case 'td':
                        if (target.is('.day') && !target.is('.disabled')){
                            var day = parseInt(target.text(), 10)||1;
                            var month = this.viewDate.getMonth();
                            if (target.is('.old')) {
                                month -= 1;
                            } else if (target.is('.new')) {
                                month += 1;
                            }
                            var year = this.viewDate.getFullYear();
                            this.date = new Date(year, month, day,0,0,0,0);
                            this.viewDate = new Date(year, month, Math.min(28, day),0,0,0,0);
                            this.fill();
                            this.set();
                            this.element.trigger({
                                type: 'changeDate',
                                date: this.date,
                                viewMode: DPGlobal.modes[this.viewMode].clsName
                            });
                        }
                        break;
                }
            }
        },

我刚添加了一个“monthSelected”事件，因此您只需编辑Js以便为此事件附加处理程序：

$(function(){
    $('#dp3').datepicker().on('monthSelected', function(ev){
        $(this).datepicker('hide');
        alert("Month number : "+ev.month);
    });
});

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

2 个答案: