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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.