Implementation of month selection plug-in based on jQuery with source code download_jquery

This is a jQuery-based month picking plug-in that can select the year and month. You can set clicking any element on the page to trigger the pop-up year and month selection panel. It can be a link or an input box. It is widely used in months. Query without setting up a select form.

Effect display Source code download 

HTML

First load the css and js files related to the monthpicker plug-in. You can download the css and js files from the source code download.

<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 and month. It can be an input box or a link or any other HTML element.

<a href="#monthpicker" id="monthpicker"></a> 
<input type="text" class="input" id="monthly"> 

jQuery

The next step is very simple, let’s call the plug-in.

$(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 can be seen from the code, the parameter years is an array, which can set the year. The parameter topOffset is the offset distance between the panel that triggers the pop-up and the current element. onMonthSelect is the callback function after selecting the month. Now run the web page, click on the link or input box, and a year and month selection panel will pop up. After selecting, the panel disappears, and the selected year and month will be displayed on the link or in the input box. As for the month style in the pop-up panel, you can modify the css in jquery.monthpicker.css to obtain the best visual effect.