基于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轮播图功能制作方法,结合实例形式详细分析了jQuery轮播图实现原理、步骤与相关操作技巧,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了使用jQuery将多条数据插入模态框的方法,很简单，很实用，需要的朋友可以参考下2014-09-09
这篇文章主要介绍了jQuery简易时光轴实现方法,可实现点击底部链接动态加载内容的功能,涉及jQuery响应鼠标事件动态操作页面元素属性的相关实现技巧,需要的朋友可以参考下2017-03-03
jQuery-1.9.1源码分析系列（十）事件系统之事件体系结构
这篇文章主要介绍了jQuery-1.9.1源码分析系列（十）事件系统之事件体系结构的相关资料,需要的朋友可以参考下2015-11-11
jquery全选checkBox功能实现代码(取消全选功能)
这篇文章主要介绍了jquery实现checkBox全选功能、取消全选功能，代码简单，大家可以直接参考使用2013-12-12
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成，onload，ready概念容易混淆，下面为大家详细介绍下2013-04-04
这篇文章主要介绍了jQuery命名空间与闭包用法,结合实例形式演示了jQuery中命名空间及闭包的具体使用技巧,需要的朋友可以参考下2017-01-01
由于公司项目需要增加推广奖励功能，网站用户通过邀请地址发给QQ好友、论坛、个人网站之类，只要有通过邀请地址点击进来就算推广成功（当天同一个IP仅算一次），推广人会获得相应的奖励、积分等。2011-07-07
这篇文章主要介绍了jQuery复制节点的方法,结合实例形式分析了clone方法复制节点及appendTo方法追加节点的相关操作技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jQuery遍历DOM节点操作之filter()方法,结合实例形式详细分析了filter的功能及4种具体用法,需要的朋友可以参考下2016-04-04
最新评论