jQuery UI DatePicker to show month year only

Question

I am using jQuery date picker to display the calendar all over my app. I want to know if I can use it to display the month and year (May 2010) and not the calendar?

Answer 1

If anyone want that also for multiple calendars its not very hard to add this functionallity to jquery ui. with minified search for:

x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(

add this in front of x

var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}

search for

<table class="ui-datepicker-calendar

and replace it with

<table class="ui-datepicker-calendar'+accl+'

also search for

this._defaults={

replace it with

this._defaults={justMonth:false,

for css you should use:

.ui-datepicker table.ui-datepicker-just_month{
    display: none;
}

after that all is done just go to your desired datepicker init functions and provide setting var

$('#txt_month_chart_view').datepicker({
    changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        justMonth: true,
        create: function(input, inst) {
            $(".ui-datepicker table").addClass("badbad");
        },
        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));
        }
});

justMonth: true is the key here :)

Answer 2

Add one more simple solution

 $(function() {
    $('.monthYearPicker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'M yy'
    }).focus(function() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        $('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    });
});

http://jsfiddle.net/tmnasim/JLydp/
Features:

• display only month/year
• Adds the month year value to input box only on clicking of Done button
• No "reopen" behavior when click "Done"
  ------------------------------------
  another solution that work well for datepicker and monthpicker in the same page:(also avoid the bug of mutiple click on previous button in IE, that may occur if we use focus function)
  JS fiddle link