最近在项目上需要使用日期选择插件必威,这篇

近年来看了有的关于面向对象的学问,近日干活中在做总结查询的时候供给用到前些时间、近八个月、二零一三年的日子范围,所以上边用用面向对象的思虑写了四个获得日期的插件,我们能够借鉴运用。

活动端日期选用插件新鲜出炉,端日期插件新鲜出炉

今天在档案的次序上急需利用日期选用插件,由于是活动端的项目,对伏乞能源依旧蛮节约的,不过百度上风流倜傥搜,诶~全是依赖jquery、zepto的,本来类库就不小,特别像mobiscroll这种体制文件一大堆又丑又长还收取金钱,小编就迫不如待自个儿做了叁个,也不过就10几kb的事情嘛,动脑筋独乐乐不及众乐乐,假若同伙们手上未有轻量级的日期选拔插件比不上先拿我这么些应付一下吗!

项目截图:

必威 1

必威 2

必威 3

花色地址:

近日在类型上急需运用日期选用插件,由于是运动端的项目,对央求能源依然蛮节约的...

自写日期年月日三级联合浮动效能jquery插件

哈哈哈,好久没写新博文啦,原因是近年来直接在探讨用jquery UI达成截取头像的机能,哈哈

言归正传,临时候呢,大家会在客户资料的页面用到二个时刻日日期的三级联动功能。在英特网找了找,没看见有多么合适的(主若是本屌丝势头于用jquery写成插件的款式利用,哈哈~~)

那篇博文呢,首要目标是给我们看下作者用jquery写成插件的款型。

规律比非常粗略,就是决断闰年,然后在select change事件的时候给显示日期的select重新append option

(PS.不知道干什么,js有appendchild 方法,能够不停的插入child而不会覆盖,不过jquery却未曾,append新的child会把以前的隐讳,感到好蛋疼的说,本土冒准备现在写个综合插件,把这一个好用的小功用都打包进去,敬请期望吧~~)

撸管无终点,金蕊处处开~~~吼吼,下边上代码。小编给她命名字为birthday

;(function($){
    $.fn.birthday = function(options){
 var opts = $.extend({}, $.fn.birthday.defaults, options);//整合参数
 var $year = $(this).children("select[name="+ opts.year +"]");
 var $month = $(this).children("select[name="+ opts.month +"]");
 var $day = $(this).children("select[name="+ opts.day +"]");
 MonHead = [31,28,31,30,31,30,31,31,30,31,30,31];
 return this.each(function(){
     var y = new Date().getFullYear();
     var con = "";
     //添加年份
     for(i = y; i >= (y-80); i--){
  con += ""+i+"年"+"";
     }
     $year.append(con);
     con = "";
     //添加月份
     for(i = 1;i <= 12; i++){
  con += ""+i+"月"+"";
     }
     $month.append(con);
     con = "";
     //添加日期
     var n = MonHead[0];//默认显示第一月
     for(i = 1; i <= n; i++){
  con += ""+i+"日"+"";
     }
     $day.append(con);
     $.fn.birthday.change($(this));

 });
    };
    $.fn.birthday.change = function(obj){
 obj.children("select[name="+ $.fn.birthday.defaults.year +"],select[name="+ $.fn.birthday.defaults.month +"]").change(function(){
     var $year = obj.children("select[name="+ $.fn.birthday.defaults.year +"]");
     var $month = obj.children("select[name="+ $.fn.birthday.defaults.month +"]");
     var $day = obj.children("select[name="+ $.fn.birthday.defaults.day +"]");
     $day.empty();
     var selectedYear = $year.find("option:selected").val();
     var selectedMonth = $month.find("option:selected").val();
     if(selectedMonth == 2 && $.fn.birthday.IsRunYear(selectedYear)){//如果是闰年
  var c ="";
  for(var i = 1; i <= 29; i++){
      c += ""+i+"日"+"";
  }
  $day.append(c);
     }else {//如果不是闰年也没选2月份
  var c = "";
  for(var i = 1; i <= MonHead[selectedMonth-1]; i++){
      c += ""+i+"日"+"";
  }
  $day.append(c);
     }
 });
    };
    $.fn.birthday.IsRunYear = function(selectedYear){
 return(0 == selectedYear % 4 && (selectedYear%100 != 0 || selectedYear % 400 == 0));
    };
    $.fn.birthday.defaults = {
 year:"year",
 month:"month",
 day:"day"
    };
})(jQuery);

代码很简短,不过也很好用,用法如下:

html部分,需要给select设置name

js部分,引进此js文件后(注意放在引用的jquery库文件前面),在页面加载完结后引入如下代码:

//三级日期联动
$("#birthday_container").birthday();

是否很简短呀,哈哈,提供该js的下载地址:

jquery达成日期年月日三级联动插件

没有害无码无广告~必威 4

附拼诗风华正茂首以供游戏~~猜下里面包车型大巴意象吧,哈哈必威 5

空山新雨后,

牧童骑黄牛,

采菊东篱下,

低头思故乡。

有任何难点或指教,请加QQ:1740437

哈哈,好久没写新博文啦,原因是前段时间一直在研讨用jquery UI完毕截取头像的效果与利益,哈哈 言归正传,...

期待本文所述对我们学习javascript程序设计具备助于。

本文由必威发布于必威-运维,转载请注明出处:最近在项目上需要使用日期选择插件必威,这篇

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。