基于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 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
JavaScript的==运算详解
Jul 20 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
浅析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面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
Python yield 使用方法浅析
2017/05/20 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
python 基于opencv操作摄像头
2020/12/24 Python
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
股份合作协议书
2014/04/12 职场文书
职务任命书范本
2014/06/05 职场文书
汽车维修求职信
2014/06/15 职场文书
大学军训的体会
2014/11/08 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript
分享几个实用的CSS代码块
2022/06/10 HTML / CSS