基于jQuery实现选取月份插件附源码下载
更新时间：2015年12月28日 14:06:02 投稿：mrr
这是一个基于jQuery的可以选择年份和月份的月份拾取插件，你可以设置点击页面上的任意元素触发弹出年月选择面板，可以是一个链接也可以是一个输入框，广泛应用于月份查询，而无需设置select表单。
这是一个基于jQuery的可以选择年份和月份的月份拾取插件，你可以设置点击页面上的任意元素触发弹出年月选择面板，可以是一个链接也可以是一个输入框，广泛应用于月份查询，而无需设置select表单。
HTML
首先将monthpicker插件相关的css和js文件载入，大家可以到源码下载里下载css和js文件。
<link rel="stylesheet" type="text/css" href="jquery.monthpicker.css"> <script src="jquery.js"></script> <script src="jquery.monthpicker.js"></script>
然后在要放置年月的位置加入如下代码，可以是输入框可以是链接等任意HTML元素。
<a href="#monthpicker" id="monthpicker"></a> <input type="text" class="input" id="monthly">
jQuery
接下来很简单，我们来调用插件。
$(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
})
});
代码中可以看出，参数years是一个数组，可以设置年份，参数topOffset就是触发弹出的面板与当前元素的偏移距离。onMonthSelect是选择月份后的回调函数。现在运行网页，点击链接或输入框，会弹出一个年月选择面板，选择好后，面板消失，并在链接上或输入框内显示所选的年月。至于弹出面板中的月份样式可以修改jquery.monthpicker.css中的css来获取最佳视觉效果。
相关文章
这篇文章主要介绍了jQuery条件分页代替离线查询，通过代码实例让读者更深入了解该功能的操作，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-08
jQuery 使用手册，大家可以耐心的看完，就基本上入门了。2009-09-09
jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法
jQuery XDomainRequest 是一个利用 XDomainRequest 对象为 IE8、IE9 实现跨域资源共享（CORS - Cross Origin Resource Sharing）的 jQuery 插件2023-06-06
这篇文章主要介绍了jquery点击获取动态数据进行传参问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
在网上经常会看到一些很长的网页会延迟加载其中的图片，我认为这是一种按需分配的做法，网页只为那些想继续浏览网页的人加载后面的图片，在不影响用户体验的前提下，最大程度地减少服务器负担和流量2012-06-06
本文主要介绍了wap手机端懒加载分页，web电脑端懒加载分页以及web电脑端footer底部固定。具有很好的参考价值，下面就跟着小编一起来看下吧2016-12-12
这篇文章主要介绍了jQuery仿写百度百科的目录树医保词条样式，点击右侧的目录树，左侧跳转到指定的锚点位置，滚动鼠标，游标跟随一起滚动至响应链接位置，具体实现思路大家参考下本文2017-01-01
这篇文章主要为大家详细介绍了使用jquery Ajax实现上传附件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要为大家详细介绍了jquery仿微信聊天界面的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
近期研究了下MenuButton,有了新的感悟，原先在那个DEMO中右键支持做法，现在看来真是小儿科啊2012-07-07
最新评论