How to convert jQuery date picker to select only month and year?

Question

How to convert jQuery date picker to select month and year only?. I tried it using date format, it working but show dates too. I am trying a way to select month and year only

I wrote code,

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
   $(function() {
       $( "#datepicker" ).datepicker({dateFormat: 'MM yy'});
   });
</script>
<input type="text" id="datepicker">

check this http://jsfiddle.net/bopperben/DBpJe/ found on http://stackoverflow.com/questions/2208480/jquery-ui-datepicker-to-show-month-year-only — Nitin Varpe, Dec 27 '13 at 06:02
possible duplicate of [Set date of jQuery UI Datepicker in "MM yy" format](http://stackoverflow.com/questions/19828717/set-date-of-jquery-ui-datepicker-in-mm-yy-format) — Cris, Dec 27 '13 at 06:06

score 24 · Accepted Answer · edited May 23 '17 at 12:25

24

Your answer is here.

http://jsfiddle.net/bopperben/DBpJe/

$(function() {
$('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    onClose: function(dateText, inst) { 
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
    }
});
});

Credits to nitin from his post... jQuery UI DatePicker to show month year only

edited May 23 '17 at 12:25

Community

1
1

answered Dec 27 '13 at 06:04

Mitesh Vora

458
8
21

9

This is just a copy and paste from nitin provided link see http://stackoverflow.com/questions/2208480/jquery-ui-datepicker-to-show-month-year-only – Dhaval Marthak Dec 27 '13 at 06:05
the problem with this solution is when you need to have two datepickers, one to show all days and the other one just to show the year-month combination, will override all date pickers styles. – Juan Zamora Feb 22 '17 at 22:28

score 14 · Answer 2 · answered Oct 22 '14 at 15:49

This is what I did for create a dropdown instead of use datepicker. Just jQuery is needed.

HTML:

 <select class="form-control" id="yearMonthInput"></select>

javascript code:

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    for (i = new Date().getFullYear() ; i > 2008; i--) {
        $.each(months, function (index, value) {
            $('#yearMonthInput').append($('<option />').val(index + "_" + i).html(value + " " + i));
        });                
    }

And looks in this way:

enter image description here

score 3 · Answer 3 · answered Dec 27 '13 at 06:15

$(document).ready(function() {
    $('#txtDate').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'MM yy',
    onClose: function() {
    var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
    },
    beforeShow: function() {
    if ((selDate = $(this).val()).length > 0)
    {
        iYear = selDate.substring(selDate.length - 4, selDate.length);   
        iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
        $(this).datepicker('option', 'monthNames'));
        $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
        $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
   }
 }
});

});

Missing piece of the puzzle for me...datepicker would update, but when I opened it again, it didn't like my "MM yy" format and would default to today's month/year. Thanks for that custom beforeShow function! — AS7K, Jul 20 '15 at 23:15

How to convert jQuery date picker to select only month and year?

3 Answers3