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

这是一个基于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来获取最佳视觉效果。

赞 (0)

相关推荐

  • jquery.form.js用法之清空form的方法

    本段代码摘取自jquery.form.js中,由于觉得该方法的使用性非常强,同时也可独立拿出来使用.该段代码言简意赅可以很好的作为学习参考. 复制代码 代码如下: /** * Clears the form data. Takes the following actions on the form's input fields: * - input text fields will have their 'value' property set to the empty string * - s

  • jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)

    本文实例讲述了jQuery插件之jQuery.Form.js用法.分享给大家供大家参考,具体如下: 一.jQuery.Form.js 插件的作用是实现Ajax提交表单. 方法: 1.formSerilize()  用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.clearForm()   清除表单中所有输入值的内容. 3.restForm    重置表单中所有的字段内容.即将所有表单中的字段恢复到页面加载时的默认值. 疑问:ajaxForm()与ajaxSub

  • 解决3.01版的jquery.form.js中文乱码问题的解决方法

    网上搜了很多方法,可能因为我用的这jquery.form.js是3.01版,也就是今年3月6日才发布的版本(汗...就是前天),所以普遍不太管用.至于低版本的是否管用,这个我没有去考证,但大部分还是不负责任的Copy Copy Copy .还有一些方法是在提交前对所有的值先编码,我觉得这个太麻烦,额外增加了不少的前端代码量,也就没有采取. 好吧,那还是自己来处理吧.首先我们要找到切入点,也就是解决问题的入口.既然我们是要对JS传递的数据进行编码,那么首先肯定要从数据的传递函数开始.我调用的是aj

  • 基于jQuery通过jQuery.form.js插件实现异步上传

    本文主要从前台和后台代码分析了jquery.form.js实现异步上传的方法,分享给大家,具体代码如下 前台代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.7.2.min.j

  • jQuery定义插件的方法

    有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方法 $.extend(object) 例子: /* $.ex

  • jQuery焦点图插件SaySlide

    先来介绍SaySlide 2.0支持自定义如下功能: 1.上下左右方向播放以及jQuery的fadeOut.slideUp.hide效果: 2.自动播放时间间隔和动画播放的的速度: 3.是否显示标题: 4.是否在新窗口打开链接: 5.是否显示底部半透明背景: 6.按钮在底部显示的位置(左中右): 7.按钮默认背景色: 8.按钮激活状态颜色: 9.设置标题文字的样式: 10.触发按钮的事件: 下面就是重点的代码,分享给大家供大家参考,具体代码如下 (function($){ $.fn.saySli

  • Jquery插件easyUi实现表单验证示例

    Jquery插件easyUi实现表单验证示例

    要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: //学号格式只能为数字 ****//这里没有问题**** number: {//value值为文本框中的值 validator: function (value) { var reg = /^[0-9]*$/; return reg.test(value); }, messag

  • 基于jQuery通过jQuery.form.js插件使用ajax提交form表单

    我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?提交成功? 我简单使用了一下,jQuery Form插件有一下优点: 1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置. 5.支持提交多种类型数据.如:

  • jquery.form.js实现将form提交转为ajax方式提交的方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完整版结合,否则使用min则无效. 原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单. 一.最简单例子: 第一步:引用js <!--这里的min是自己用js压缩工具对完整版进行的压缩 并不是真正的min,所以好

  • jquery插件jquery.confirm弹出确认消息

    jquery插件jquery.confirm弹出确认消息

    本文为大家介绍了插件jquery.confirm弹出确认消息的实现方法,具有一定的参考价值,特分享给大家供大家参考,具体内容如下 实现效果: 具体代码: 1.插件默认参数 // 默认参数 $.confirm.defaults = { // 样式 css: "http://static.qianduanblog.com/css/jquery.confirm/default.min.css?v=" + Math.ceil(new Date() / 86400000), // 确认框内容 c

随机推荐