Hide datepicker after selecting month

Question

Using Datepicker for Bootstrap I want to Limit the view mode to months which is working fine but I want to hide dropdown when I select month.

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

here is the http://jsfiddle.net/ded3v/6/

Answer 1

Download the datepicker Js to your local server and replace the click function by this one :

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;
                }
            }
        },

I just added an "monthSelected" event, so you just have to edit your Js in order to attach an handler to this event :

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

Answer 2

You could capture click event:

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

DEMO capture

Plugin stopping click propagation on .month element, you cannot delegate click event, you can still use following code(delegate dblclick event) to be able to close datepicker on dblclick (i'd suggest you to use this method for better UI experience!):

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

DEMO dblclick