Bootstrap Datepicker - Months and Years Only

JqueryTwitter Bootstrap

Jquery Problem Overview


I am using bootstrap datepicker and my code is like following, Demo of the code on jsfiddle

<div class="input-append date" id="datepicker" data-date="02-2012" 
     data-date-format="mm-yyyy">

 <input  type="text" readonly="readonly" name="date" >	  
 <span class="add-on"><i class="icon-th"></i></span>	  
</div>		


$("#datepicker").datepicker({
	    viewMode: 'years',
	     format: 'mm-yyyy'
	});

The above code is working fine, but what I am trying to do is allow users pick months and years only.

Could you please tell me how to do that?

Jquery Solutions


Solution 1 - Jquery

How about this :

$("#datepicker").datepicker( {
    format: "mm-yyyy",
    viewMode: "months", 
    minViewMode: "months"
});

Reference : Datepicker for Bootstrap


For version 1.2.0 and newer, viewMode has changed to startView, so use:

$("#datepicker").datepicker( {
    format: "mm-yyyy",
    startView: "months", 
    minViewMode: "months"
});

Also see the documentation.

Solution 2 - Jquery

Notice that in the version of 1.2.0 the viewMode has changed to startView.

eg:

$('#sandbox-container input').datepicker({
  startView: 1,
  minViewMode: 1
});

http://eternicode.github.io/bootstrap-datepicker/?markup=component&format=yyyy&weekStart=&startDate=&endDate=&startView=2&minViewMode=2&todayBtn=false&language=zh-CN&orientation=auto&autoclose=on&forceParse=on#sandbox

Solution 3 - Jquery

I'm using version 2(supports both bootstrap v2 and v3) and for me this works:

$("#datepicker").datepicker( {
    format: "mm/yyyy",
    startView: "year", 
    minView: "year"
});

Solution 4 - Jquery

For the latest bootstrap-datepicker (1.4.0 at the time of writing), you need to use this:

$('#myDatepicker').datepicker({
	format: "mm/yyyy",
	startView: "year", 
	minViewMode: "months"
})

Source: Bootstrap Datepicker Options

Solution 5 - Jquery

I am using bootstrap calender for future date not allow with allow change in months & year only..

var j = jQuery.noConflict();
        j(function () {
            j(".datepicker").datepicker({ dateFormat: "dd-M-yy" }).val()
        });

        j(function () {
            j(".Futuredatenotallowed").datepicker({
                changeMonth: true,
                maxDate: 0,
                changeYear: true,
                dateFormat: 'dd-M-yy',
                language: "tr"
            }).on('changeDate', function (ev) {
                $(this).blur();
                $(this).datepicker('hide');
            }).val()
        });

Solution 6 - Jquery

You should have to add only minViewMode: "months" in your datepicker function.

Solution 7 - Jquery

To view the months of the current year, and only the months, use this format - it only takes the months of that year. It can also be restricted so that a certain number of months is displayed.

<input class="form-control" id="txtDateMMyyyy"  autocomplete="off" required readonly/>

<script>
('#txtDateMMyyyy').datetimepicker({
    format: "mm/yyyy",
    startView: "year",
    minView: "year"
}).datetimepicker("setDate", new Date());
</script>

Solution 8 - Jquery

Hello if you want to get only year this will help you

  $('.date-own').datepicker({
     minViewMode: 2,
     format: 'yyyy'
   });

Solution 9 - Jquery

Why not call the $('.input-group.date').datepicker("remove"); when the select statement is changed then set your datepicker view then call the $('.input-group.date').datepicker("update");

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionblack_beltView Question on Stackoverflow
Solution 1 - JqueryIswanto SanView Answer on Stackoverflow
Solution 2 - JqueryLiberView Answer on Stackoverflow
Solution 3 - JqueryTanyaView Answer on Stackoverflow
Solution 4 - JquerySheharyarView Answer on Stackoverflow
Solution 5 - Jqueryvishal kumar SaxenaView Answer on Stackoverflow
Solution 6 - JqueryNisarg BhavsarView Answer on Stackoverflow
Solution 7 - JqueryMarco PuenayanView Answer on Stackoverflow
Solution 8 - Jqueryabubakkar tahirView Answer on Stackoverflow
Solution 9 - JqueryKielView Answer on Stackoverflow