Search code examples
jqueryjquery-uidatepickercalendar

Change position between month and year in jQuery datepicker


I made 'month calendar' with datepicker following below link. When I click button, calendar comes out and show month and year. Here is my question. Anyone knows how change this order?

from 1.month 2.year to 1.year 2.month

http://develop-for-fun.blogspot.kr/2013/08/jquery-ui-datepicker-month-and-year.html

        $(function () {
            $('#MainContent_txtMonth').datepicker({
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                dateFormat: 'yy-mm',
                monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
                showOn: "button",
                buttonImage: "img/button_calendar.jpg",
                buttonImageOnly: true
                }).focus(function() {
                var thisCalendar = $(this);
                $('.ui-datepicker-calendar').detach();
                $('.ui-datepicker-close').click(function () {
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                thisCalendar.datepicker('setDate', new Date(year, month, 1));
                });
            });
        });

Solution

  • You don't have to modify jquery ui source code. I've just found an options that does what you want.

    showMonthAfterYear:true,
    

    Example of usage:

    $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            showMonthAfterYear:true,
            dateFormat: 'MM yy',
          });