基于jQuery下拉日期插件
2016-05-17 15:18
627 查看
第一次写jquery插件,基于业务来实现,通用性并不强,存个档。
具体效果如下:
/** * jQuery.selectDate * jQuery 下拉列表选择日期插件 * @author<a target=_blank href="http://my.csdn.net/" class="user_name" style="list-style: none; word-break: break-all; word-wrap: break-word; margin: 0px 1em 0px 0px; padding: 0px; font-stretch: normal;">瑾色年華</a> * */ (function($){ "use strict"; var defaultOptions = { begin: 1960, end: new Date().getFullYear() }; var selectDate = function(self, option){ var $self = this; $self.opt = $.extend({}, defaultOptions, option); $self.elem = self; $self.init(); }; selectDate.prototype = { init: function(){ var $self = this , opt = $self.opt , elem = $self.elem; var year=$(elem[0]),month=$(elem[1]),day=$(elem[2]); for(var i=opt.end;i>=opt.begin;i--){ $self.addChildren(year,i); } for(var i=1;i<=12;i++){ $self.addChildren(month,i<10?"0"+i:i); } $(".overview.date:lt(2)").on("click",function(){ var year=parseInt($(".overview.date").eq(0).find("li.selected a").text()); var month=parseInt($(".overview.date").eq(1).find("li.selected a").text()); $(".overview.date").eq(2).empty(); if(year&&month){ for(var i=1;i<=new Date(year,month,0).getDate();i++){ var children=$("<li><a>"+(i<10?"0"+i:i)+"</a></li>") $(".overview.date").eq(2).append(children); } } }) },addChildren:function(parent,text){ var children=$("<li><a>"+text+"</a></li>"); return parent.append(children); } } function plugin(option) { new selectDate(this,option); return this; } $.fn.selectDate= plugin; $.fn.selectDate.Constructor = selectDate; })(jQuery)
具体效果如下:
相关文章推荐
- jquery的学习
- jquery 双击修改某项值
- jQuery扩展方法
- jQuery基础——样式篇
- jQuery之防止冒泡事件
- jquery中click事件的几种写法
- jquery中的attr和prop深度理解
- 5月13日 Jquery基础
- jQuery+css3弹出框插件
- jquery动态新增行
- 统一处理jquery ajax请求过程中的异常错误信息的机制
- JQUERY 大于
- jquery中ajax如何返回值到上层函数里?
- jQuery事件绑定和委托
- jquery 属性操作 attr () val() html()
- jQuery学习笔记之二:显示效果
- JQuery属性操作 addclass removeclass hasclass toggleClass()
- jQuery基础——DOM篇
- 详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()
- JS和jQuery使用submit方法无法提交表单的原因分析及解决办法