基于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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
js实现不重复导入的方法
Mar 02 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
vue的keep-alive用法技巧
Aug 15 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
随机头像PHP版
2006/10/09 PHP
php基础学习之变量的使用
2011/06/09 PHP
php一个找二层目录的小东东
2012/08/02 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python3 线性回归验证方法
2019/07/09 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
三八妇女节超市活动方案
2014/08/18 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
初二英语教学反思
2016/02/15 职场文书