Bootstrap Datepicker - Months and Years Only

Question

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?

I'd just use two select boxes... it would make a lot more sense than using a calendar widget, and trying to hide the actual calendar. — , Feb 20 '13 at 07:54
Would you still use two select boxes even if you had an option like this http://jsfiddle.net/Kz2sW/1/ ? :) — black_belt, Feb 20 '13 at 08:06

score 313 · Accepted Answer · edited May 27 '15 at 21:00

313

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.

edited May 27 '15 at 21:00

Martin Tournoij

26,737
24
105
146

answered Feb 20 '13 at 07:40

Iswanto San

18,263
13
58
79

1

Thanks but I had to replace `format: " mm"` with `format: "mm-yyyy"` . Its working now :) – black_belt Feb 20 '13 at 08:03
1

It doesn't show the `-` between months and years if you keep a space before `mm-yyyy` in `format: " mm-yyyy",`, could you please edit your answer again? – black_belt Feb 20 '13 at 08:08
I don't think viewMode is a valid option as per the documentation. But the other options allowed the required display to work. – Prathamesh Datar Jun 25 '18 at 05:56
Is there any option for autoclose? – Alauddin Ahmed Nov 19 '18 at 06:43

Liber · Answer 2 · 2017-10-12T06:57:35.913

8

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

edited Oct 12 '17 at 06:57

answered Nov 22 '13 at 05:10

Liber

422
4
12

score 4 · Answer 3 · edited Jan 05 '16 at 12:14

4

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"
});

edited Jan 05 '16 at 12:14

Jamie Rees

7,973
2
45
83

answered Jan 05 '16 at 12:12

Tanya

277
3
4

change `minView` to `minViewMode` – Raghavendra N May 25 '17 at 21:40

score 3 · Answer 4 · answered Apr 22 '15 at 18:58

3

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

answered Apr 22 '15 at 18:58

Sheharyar

73,588
21
168
215

on click of month in bootstrap, it is showing the date and then entering text in mm/yy format – Shiva Saurabh Aug 30 '19 at 13:28

score 1 · Answer 5 · answered Mar 09 '16 at 06:36

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()
        });

score 1 · Answer 6 · answered Jan 06 '17 at 07:44

1

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

answered Jan 06 '17 at 07:44

Nisarg Bhavsar

946
2
18
40

score 1 · Answer 7 · edited Dec 21 '20 at 15:13

1

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>

edited Dec 21 '20 at 15:13

Samuel Liew

76,741
107
159
260

answered Jan 22 '20 at 22:43

Marco Puenayan

9
2

5

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you’ve made. – Ismael Padilla Jan 22 '20 at 23:07
Se agrego una pequeña descripcion de lo que hace el codigo – Marco Puenayan Feb 06 '20 at 03:37

score 0 · Answer 8 · answered Apr 20 '21 at 00:31

0

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

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

answered Apr 20 '21 at 00:31

abubakkar tahir

737
1
11
13

score -1 · Answer 9 · answered Oct 31 '14 at 06:17

-1

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");

answered Oct 31 '14 at 06:17

Kiel

483
3
5
18

Bootstrap Datepicker - Months and Years Only

9 Answers9

Linked