Edit in JSFiddle

JavaScript
HTML
CSS
Result
Resources

// NOTE: Don't forget to wrap you code in:
// $(document).ready(function() { $('#id').MonthPicker(...); });

var options = {
        MonthFormat: 'yymm',       
        ShowIcon: false,
        i18n: {
            year: '년도',
            prevYear: '이전년도',
            nextYear: '다음년도',
            next12Years: '다음 12년',
            prev12Years: '이전 12년',
            nextLabel: '다음',
            prevLabel: '이전',
            buttonText: 'Open Month Chooser',
            jumpYears: '년도로 이동',
            backTo: '뒤로',
            months: ['1 월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        }
    };

// Default functionality.
$('.Default').MonthPicker(options);

// Hide the icon and open the menu when you 
// click on the text field.
$('#NoIconDemo').MonthPicker({ Button: false });

// Create jQuery UI Datepicker's default button.
$("#PlainButton").MonthPicker({
    Button: '<button>...</button>'
});

// Create a button out of an image. 
// for details on handeling the disabled state see:
// https://github.com/KidSysco/jquery-ui-month-picker#button
$("#ImageButton").MonthPicker({
    Button: '<img class="icon" src="//rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/images/icon.gif" />'
});

// Creates a button out an a JQuery UI button. See:
// http://github.com/KidSysco/jquery-ui-month-picker#button
// for details on handeling internationalization.
$("#JQButton").MonthPicker({
    Button: function() {
        return $("<button>Open</button>").button();
    }
});

// Allows 1 months from today (future months only). 
$('#FutureDateDemo').MonthPicker({ MinMonth: 1 });

// Allows at most 1 month from today (past months only).
$('#PastDateDemo').MonthPicker({ MaxMonth: -1 });

// Don't allow this month and at most 18 months from today.
// For detaild on the datatyps you can pass see:
// http://github.com/KidSysco/jquery-ui-month-picker#minmonth
$('#YearAndAHalfDeom').MonthPicker({
    MinMonth: 0, 
    MaxMonth: '+2y -6m' // Or you could just pass 18.
});

// Start on the year 2023 no matter what date is selected.
$("#OverrideStartYear").MonthPicker({ StartYear: 2023 });

// Display an error message if the date is not valid.
$('#GetYearDemo').MonthPicker({
    ValidationErrorMessage: 'Invalid Date!'
});

// Apply an input mask which mkase sure the user 
// limits the user to typing a month in the 
//fromat specified in the MonthFormat option.
$('#DigitalBush').MonthPicker({ UseInputMask: true });
$('#DigitalBushBoth').MonthPicker({
    UseInputMask: true,
    ValidationErrorMessage: 'Invalid Date!'
});

// The plugin supports the HTML 5 month type out of the box
// no special setup required.
$('#Html5').MonthPicker({
    ShowIcon: false,
    StartYear: 2027
});

// You can control the menu's positioning 
// and collision handeling by passing options to the 
// jQuery UI .position() plugin.
$('#PositionDemo').MonthPicker({
    ShowIcon: false,
    Position: {
        collision: 'fit flip'
    }
});

// Create an inline menu by calling 
// .MonthPicker(); on a <div> or <span> tag.
$("#InlineMenu").MonthPicker({
    SelectedMonth: '04/' + new Date().getFullYear(),
    OnAfterChooseMonth: function(selectedDate) {
        // Do something with selected JavaScript date.
        // console.log(selectedDate);
    }
});

$("#FormatSelect").change(function() {
   $("#MonthFormat").MonthPicker('option', 'MonthFormat',$(this).val());
});

$('#Modal').dialog({
    autoOpen: false,
    title: 'MonthPicker Dialog Test',
    modal: true
});

$("h1").text( $("h1").text().replace('@VERSION', $.MonthPicker.VERSION) );

<base href="https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/">
<div>
     <h1>
            The jQuery UI Month Picker Plugin Version @VERSION</h1>

    <p>The jQuery UI Month Picker Plugin was designed to allow users to choose only a month and year when only that input is required. Clicking on the year, allows the user to jump ahead or back 12 years at a time. Clicking anywhere on the page, except on the month picker menu itself, will cause the month picker to hide.</p>
    
     <h2>
            Demonstration</h2>

        <p class="demo"> <b>Default functionality</b>

            <br />This demonstrates the plugin's defualt functionality.
            <br />
            <br />Choose a Month:
            <input id="IconDemo" class='Default' type="text" />
        </p>
        <p class="demo button"> <b>Button Demonstration</b>
            <br />This demonstrates how you can customize every aspect of the open button.  
            See the <a href='http://github.com/KidSysco/jquery-ui-month-picker#button'>Button documenation</a> for details on handeling internationalization
            <br />
            <br />No button:
            <br />
            <input id="NoIconDemo" type="text" />
            <br />
            <br />Image button:
            <br />
            <input id="ImageButton" type="text" />
            <br />
            <br />Plain HTML button:
            <br />
            <input id="PlainButton" type="text" />
            <br />
            <br />jQuery UI button:
            <br />
            <input id="JQButton" type="text" />
        </p>
        
        <p class="demo"> <b>MinMonth and MaxMonth Demonstration</b>

            <br />This demonstrates how you can limit the user to chooseing months within a given interval.
            <br />
            <br />Future months only:
            <br />
            <input id="FutureDateDemo" type="text" />
            <br />
            <br />Past months only:
            <br />
            <input id="PastDateDemo" type="text" />
            <br />
            <br />18 months from today:
            <br />
            <input id="YearAndAHalfDeom" type="text" />
        </p>
        <p class="demo"> <b>Start Year Demonstration</b>

            <br />This demonstrates how the plugin will default to the year specified in the text box. Changing the year in the text box will result in a new default year for the chooser and if no date is selected then the default year is the current year.
            <br />
            <br />Choose a month:
            <input id="StartYearDemo" class='Default' type="text" value="01/2025" />
        </p>
        <p class="demo"> <b>Override Start Year Demonstration</b>

            <br />This demonstrates how the MonthPicker can be configured to override the start year default behavior. This MonthPicker will start on 2023 no matter which date is currently selected, even if no date is specified.
            <br />
            <br />Choose a month:
            <input id="OverrideStartYear" type="text" />
        </p>
        <p class="demo"> <b>Get Month/Year & Validation API Demonstration</b>

            <br />This demonstrates API usage for the GetSelectedMonthYear(), GetSelectedYear() and GetSelectedMonth() function calls which will also perform date validation. Clear() will clear the text field and any validation messages.
            <br />
            <br />Choose a month:
            <input id="GetYearDemo" class="GetYearDemo" type="text" value="02/2012" />
            <br />
            <br />
            <button type="button" onclick="alert($('.GetYearDemo').MonthPicker('GetSelectedYear'));">Get Year</button>
            <button type="button" onclick="alert($('#GetYearDemo').MonthPicker('GetSelectedMonth'));">Get Month</button>
            <button type="button" onclick="alert($('#GetYearDemo').MonthPicker('GetSelectedMonthYear'));">Get Month and Year</button>
            <button type="button" onclick="$('#GetYearDemo').MonthPicker('Clear');">Clear</button>
        </p>
        <p class="demo"> <b>Disable/Enable API Demonstration</b>

            <br />This demonstrates API usage for the Enable() and Disable().
            <br />
            <br />Choose a month:
            <input id="EnableDisableDemo" class="Default" type="text" value="12/2009" />
            <br />
            <button type="button" onclick="$('#EnableDisableDemo').MonthPicker('option', 'Disabled', true);">Disable</button>
            <button type="button" onclick="$('#EnableDisableDemo').MonthPicker('option', 'Disabled', false);">Enable</button>
        </p>
        <p class="demo"> <b>Digital Bush Integration Demonstration</b>

            <br />This demonstrates how the MonthPicker plugin integrates with the <a href="http://digitalbush.com/" target="_new">Digital Bush Plugin for Input Masking</a> as well as the html 5 placeholder attribute to simulate watermarking. Try to type an invalid date and try the Get Month/Year button to fire off validation.
            <br />
            <br />Type in a month/year:
            <br />
            <input id="DigitalBush" type="text" class="digital-bush" />
            <br />
            <br />Type in a month/year:
            <br />
            <input id="DigitalBushBoth" type="text" class="digital-bush" placeholder="mm/yyyy" />
            <br />
            <br />
            <button type="button" onclick="$('.digital-bush').MonthPicker('Clear');">Clear All</button>
            <button type="button" onclick="alert($('#DigitalBushBoth').MonthPicker('GetSelectedMonthYear'));">Get Month/Year</button>
        </p>

        <p class="demo"> <b>Month Format Demonstration</b>
            <br />This demonstrates how you can display month feedback in a variety of ways. Choose a month format from the dropdown, then click on the input and select a month to see it in that format.
            <br />
            <br />
            Date: <input type="text" id="MonthFormat" class='Default' value='12/2015' style='width:150px;'>
            <br>
            <br>
            Format options:<br>
            <select id="FormatSelect">
                <option value="mm/yy">Default - mm/yy</option>
                <option value="yy-mm">ISO 8601 - yy-mm</option>
                <option value="M, y">Short - M, y</option>
                <option value="MM, y">Medium - MM, y</option>
                <option value="mm MM, yy">Full - mm MM, yy</option>
                <option value="MM &apos;in the year&apos; yy">With text - MM 'in the year' yy</option>
            </select>
        </p>


        <div class="demo"> <b>Inline Menu Demonstration</b>

            <br />This demonstrates the Month Picker menu inlined in a div tag.
            <br />
            <br />
            <div id='InlineMenu'></div>
        </div>

        <p class="demo"> <b>jQuery UI Dialog Integration Demonstration</b>

            <br />This demonstrates the Month Picker running inside of the jQuery UI Modal Dialog.
            <br />
            <br />
            <button type="button" id="LaunchDialog" onclick="$('#Modal').dialog('open');">Launch Dialog</button>
        </p>

        <div class="demo-position"> <b>.position() Integration Demonstration</b>

            <br />This demonstrates the Month Picker integration with the optional .position() plugin.
        The right aligned input helps to show how the menu will not allow the edges of the window to hide it's appearance. The menu will position itself so that it is always visible. The same effect can be seen on every other month picker on this page by scrolling down low enough so that the menu shows above the input instead of below.
            <p class="text-right">
            <br />Choose a month:
            <input id="PositionDemo" type="text" value="02/2012" />
            </p>
        </div>
        <p class="demo"> <b>HTML 5 Month Input Type Support</b>

            <br />This demonstrates how the MonthPicker will work with the HTML 5 Month Input Type. View this section using Chrome to see Google's latest implementation in comparison.
            <br />
            <br />
            Jquery UI Month Picker: <input id="Html5" type="month" class="" /> <br /> <br />
            Chrome Month Picker: <input id="ChromeMonthPicker" type="month" class="" /> 
        </p>
</div>
 


<div>&nbsp;
    <br />
    <br />
</div>
<div id="Modal">Test:
    <input id="DialogDemo" class='Default' type="text" />
</div>
<a href="https://github.com/KidSysco/jquery-ui-month-picker" target="_new"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

.icon {
    vertical-align: bottom;
    margin-top: 2px;
    margin-bottom: 3px;
    cursor: pointer;
}

.icon:active {
    opacity: .5;
}

.demo.button input {
    margin-right: 2px;
}

.demo.button .ui-button-text {
    padding: .4em .6em;
    line-height: 0.8;
}

input[type='text'] {
  width: 60px;
}

body {
    margin: 15px 20px;
}

External resources loaded into this fiddle: