1.   阿里云服务器1888元代金券领取
  2.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

jQuery年月日(生日)联动选择器

小川 特效组件
郑重声明:
1、本站源码仅供个人学习研究和交流使用,请于下载后二十四小时内删除
2、本站大多资源来源于互联网、用户分享,仅供学习交流使用,本站不提供任何技术支持
3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意

查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

jQuery年月日(生日)联动选择器

效果图:

22.png

源码说明:

1、JQuery,核心代码部分:

(function($){
$.extend({
ms_DatePicker: function (options) {
    var defaults = {
        YearSelector: "#sel_year",
        MonthSelector: "#sel_month",
        DaySelector: "#sel_day",
        FirstText: "--",
        FirstValue: 0
    };
    var opts = $.extend({}, defaults, options);
    var $YearSelector = $(opts.YearSelector);
    var $MonthSelector = $(opts.MonthSelector);
    var $DaySelector = $(opts.DaySelector);
    var FirstText = opts.FirstText;
    var FirstValue = opts.FirstValue;

    // 初始化
    var str = "<option value=\""+FirstValue+"\">"+FirstText+"</option>";
    $YearSelector.html(str);
    $MonthSelector.html(str);
    $DaySelector.html(str);

    // 年份列表
    var yearNow = new Date().getFullYear();
	var yearSel = $YearSelector.attr("rel");
    for (var i = yearNow; i >= 1900; i--) {
		var sed = yearSel==i?"selected":"";
		var yearStr = "<option value=\""+i+"\""+sed+">"+i+"</option>";
        $YearSelector.append(yearStr);
    }

    // 月份列表
	var monthSel = $MonthSelector.attr("rel");
    for (var i = 1; i <= 12; i++) {
		var sed = monthSel==i?"selected":"";
        var monthStr = "<option value=\""+i+"\""+sed+">"+i+"</option>";
        $MonthSelector.append(monthStr);
    }

    // 日列表(仅当选择了年月)
    function BuildDay() {
        if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) {
            // 未选择年份或者月份
            $DaySelector.html(str);
        } else {
            $DaySelector.html(str);
            var year = parseInt($YearSelector.val());
            var month = parseInt($MonthSelector.val());
            var dayCount = 0;
            switch (month) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    dayCount = 31;
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    dayCount = 30;
                    break;
                case 2:
                    dayCount = 28;
                    if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
                        dayCount = 29;
                    }
                    break;
                default:
                    break;
            }
			
			var daySel = $DaySelector.attr("rel");
            for (var i = 1; i <= dayCount; i++) {
				var sed = daySel==i?"selected":"";
				var dayStr = "<option value=\""+i+"\""+sed+">"+i+"</option>";
                $DaySelector.append(dayStr);
            }
        }
    }
    $MonthSelector.change(function () {
        BuildDay();
    });
    $YearSelector.change(function () {
        BuildDay();
    });
	if($DaySelector.attr("rel")!=""){
		BuildDay();
	}
} 

});
})(jQuery);

2、html部分+js调用核心方法:

<div id="main">
   <div class="demo">
      <p>
        【不带默认值】:<br/>
        <label>生日:</label>
        <select id="sel_year"></select>年
        <select id="sel_month"></select>月
        <select id="sel_day"></select>日
      </p>
      
      <p>
        【带默认值】:<br/>
        <label>生日:</label>
        <select class="sel_year" rel="2016"></select>年
        <select class="sel_month" rel="10"></select>月
        <select class="sel_day" rel="26"></select>日
      </p>
        
  </div>
</div>
<script src="http://www.youhutong.com/static/js/jquery.js"></script>
<script type="text/javascript" src="birthday.js"></script>
<script>  
$(function () {
  // 初始化(不带默认值)
  $.ms_DatePicker();
  // 初始化(带默认值)
  $.ms_DatePicker({
            YearSelector: ".sel_year",
            MonthSelector: ".sel_month",
            DaySelector: ".sel_day"
    });
}); 
</script>

还有什么不懂的,可以直接下载案例源码去研究


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
升级为VIP会员,有效期内免费下载本站所有VIP源码  点击升级为VIP

转载请注明来源地址:小川编程 » http://www.youhutong.com/index.php/article/index/86.html

郑重声明:
1、本站源码仅供个人学习研究和交流使用,请于下载后二十四小时内删除
2、本站大多资源来源于互联网、用户分享,仅供学习交流使用,本站不提供任何技术支持
3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情