Download the month plug-in Attachment source code based on jQuery, and download the jquery source code

Download the month plug-in Attachment source code based on jQuery, and download the jquery source code

This is a jQuery-based plugin for selecting year and month. You can click any element on the page to trigger the year and month Selection Panel. It can be a link or an input box, it is widely used in month queries without the need to set the select form.

Download the effect display source code

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.

<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 to the location where the year and month are to be placed. The input box can be any HTML element such as a link.

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

JQuery

Next, 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 }) }); 

The Code shows that the years parameter is an array and the year can be set. The topOffset parameter is the offset distance between the pop-up panel and the current element. OnMonthSelect is the callback function after the month is selected. Run the webpage now. Click the link or input box. A year and month selection panel is displayed. After the page is selected, the Panel disappears and the selected year and month are displayed on the link or in the input box. You can modify the css in jquery.monthpicker.css to obtain the optimal visual effect.

Articles you may be interested in:

• Using jquery to simulate the selection of recipients in QQ mail and other effects (1)
• JQuery Jcrop plugin for Image Selection
• Jquery slibings selects the implementation code of other elements at the same level
• JQuery + jRange implement sliding selection of Numerical range effects
• JQuery plug-in slider to select the price range by dragging the slider
• JQuery's Numerical range range2dslider selects plug-in special effects for multiple code sharing