jQuery UI MonthPicker

A month Picker plugin for jQuery UI.

by kidsysco

HTML

<link rel="stylesheet" href="https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.css">
<link rel="stylesheet" href="https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/test/test.css">
<script src="https://rawgit.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.min.js"></script>
<script src="https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.js"></script>
<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>AltField functionality</b>

            <br />This demonstrates the plugin's AltField functionality.
            <br />
            <br />Choose a Month:
            <input id="IconDemo" class='Default' type="text" />
            <br />
            <br />
            <input id="MyFirstField" />
            <br />
            <input id="MySecondField" />
        </p>
       
</div>

CSS

.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;
}

JavaScript

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

// Default functionality.
$('.Default').MonthPicker({ AltField: '#MyFirstField, #MySecondField',
    AltFormat: 'yy-mm',
    OnAfterMenuClose: function () {
                var date = $('.Default').MonthPicker('GetSelectedYear');
                console.log(date);
                $(".Default").trigger("change");
    }
});

$('.Default').change(function(){
	alert("jquery change fired");
});


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