自写日期年月日三级联动效果jquery插件

标签：jquery日期三级联动   年月日三级联动插件   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 += "<option value='"+i+"'>"+i+"年"+"</option>";
	    }
	    $year.append(con);
	    con = "";
	    //添加月份
	    for(i = 1;i <= 12; i++){
		con += "<option value='"+i+"'>"+i+"月"+"</option>";
	    }
	    $month.append(con);
	    con = "";
	    //添加日期
	    var n = MonHead[0];//默认显示第一月
	    for(i = 1; i <= n; i++){
		con += "<option value='"+i+"'>"+i+"日"+"</option>";
	    }
	    $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 += "<option value='"+i+"'>"+i+"日"+"</option>";
		}
		$day.append(c);
	    }else {//如果不是闰年也没选2月份
		var c = "";
		for(var i = 1; i <= MonHead[selectedMonth-1]; i++){
		    c += "<option value='"+i+"'>"+i+"日"+"</option>";
		}
		$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

<div id="birthday_container">
<select name="year"></select>
<select name="month"></select>
<select name="day"></select>
</div>

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

jquery实现日期年月日三级联动插件

无毒无码无广告~

附拼诗一首以供娱乐~~猜下其中的意境吧，哈哈

空山新雨后，

牧童骑黄牛，

采菊东篱下，

低头思故乡。

有任何疑问或指教，请加QQ：1740437

自写日期年月日三级联动效果jquery插件,布布扣,bubuko.com

自写日期年月日三级联动效果jquery插件

标签：jquery日期三级联动   年月日三级联动插件   jquery日期年月日三级联动   

原文地址：http://blog.csdn.net/kabulore/article/details/37904967