基于jQuery实现选取月份插件附源码下载


Posted in Javascript onDecember 28, 2015

这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单。

基于jQuery实现选取月份插件附源码下载

效果展示        源码下载  

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来获取最佳视觉效果。

Javascript 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
javascript与CSS复习(三)
Jun 29 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
浅析AngularJs HTTP响应拦截器
Dec 28 #Javascript
Bootstrap实现默认导航栏效果
Sep 21 #Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 #Javascript
AngularJS进行性能调优的7个建议
Dec 28 #Javascript
浅析AngularJS Filter用法
Dec 28 #Javascript
jquery实现倒计时功能
Dec 28 #Javascript
基于jquery实现瀑布流布局
Jun 28 #Javascript
You might like
PHP 面向对象实现代码
2009/11/11 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
js日历功能对象
2012/01/12 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
python框架flask表单实现详解
2019/11/04 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
千元咖啡店的创业计划书范文
2013/12/29 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
承诺书格式
2014/06/03 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
实习单位鉴定意见
2015/06/04 职场文书
《青山不老》教学反思
2016/02/22 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python