A tutorial on using jquery to select the Month plug-in

This is a jquery based on the choice of year and month of month pickup plug-in, you can set click on the page of any element to trigger the pop-up selection panel, can be a link can also be an input box, widely used in the month query, without setting the Select form.

Html

First of all Monthpicker plug-ins related to the CSS and JS files loaded, you can download the source code to download CSS and JS files.

<link rel= "stylesheet" type= "Text/css" href= "Jquery.monthpicker.css" >
<script src= "Jquery.js" ></script>
<script src= "Jquery.monthpicker.js" ></script>

Then add the following code where you want to place the year, which can be any HTML element, such as a link, or an input box.

<a href= "#monthpicker" id= "Monthpicker" ></a>
<input type= "text" class= "input" id= "Monthly" >
Jquery

The next step is simply to invoke the plugin.

$ (function () {
$ (' #monthpicker '). Monthpicker ({
Years: [2015, 2014, 2013, 2012, 2011],
Topoffset:6,
Onmonthselect:function (M, y) {
Console.log (' Month: ' + M + ', year: ' + y ');
}
});
$ (' #monthly '). Monthpicker ({
Years: [2015, 2014, 2013, 2012, 2011],
Topoffset:6
})
});

As you can see in the code, the parameter years is an array, you can set the year, and the parameter topoffset is the offset between the panel that triggers the pop-up and the current element. Onmonthselect is the callback function after the month is selected. Now run the Web page, click on the link or input box, will pop up a year selection panel, select Good, the panel disappears, and in the link or input box to display the selected years. As for the month style in the pop-up panel, you can modify the CSS in Jquery.monthpicker.css to get the best visual effect.