JQuery年月日三级联动(生日)

迷南。 2022-07-12 04:16 236阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery年月日三级联动(生日)</title>
    <style type="text/css">
    	.demo{width:380px; margin:80px 0 0 350px;}
    	.demo p{line-height:40px; font-size:16px}
    </style>
    </head>
        <body>
            <div class="container">
                <div class="demo">
                    <p>
                        添加：<br/>
                        <label>生日：</label>
                        <select id="select_year" name="year"></select>年
                        <select id="select_month" name="month"></select>月
                        <select id="select_day" name="day"></select>日
                    </p>
                    <p>
                        修改【rel】：<br/>
                        <label>生日：</label>
                        <select id="select_year2" rel="2015" name="year2"></select>年
                        <select id="select_month2" rel="12" name="month2"></select>月
                        <select id="select_day2" rel="13" name="day2"></select>日
                    </p>
                </div>  
            </div>
    		<script src="http://code.jquery.com/jquery-latest.js"></script>
           <script language="javascript">
    			(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();
    						}
    					} // End ms_DatePicker
    			});
    			})(jQuery);
           </script>
            <script language="javascript">
                $(function() {
                    $.ms_DatePicker({
                        YearSelector: "#select_year",
                        MonthSelector: "#select_month",
                        DaySelector: "#select_day"
                    });
                    $.ms_DatePicker({
                        YearSelector: "#select_year2",
                        MonthSelector: "#select_month2",
                        DaySelector: "#select_day2"
                    });
                });
            </script> 
    
        </body>
    </html>