视频课：/course/play/7621
只显示年月日的前端代码：jquery+js
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>演示：jQuery年月日（生日）选择器</title><link rel="stylesheet" type="text/css" href="../css/main.css" /><style>.demo{width:420px; margin:40px auto 0 auto; min-height:250px;}.demo p{line-height:42px; font-size:16px}</style><script type="text/javascript" src="jquery.js"></script></head><body><div id="header"><div id="logo"><h1><a href="" title="返回helloweba首页">helloweba</a></h1></div><div class="demo_topad"><script src="/js/ad_js/demo_topad.js" type="text/javascript"></script></div></div><div id="main"><h2 class="top_title"><a href="/view-blog-263.html">jQuery年月日（生日）选择器</a></h2><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="2000"></select>年<select class="sel_month" rel="2"></select>月<select class="sel_day" rel="14"></select>日</p></div><br/><div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/></div><script type="text/javascript" src="birthday.js"></script><script> $(function () {$.ms_DatePicker({YearSelector: ".sel_year",MonthSelector: ".sel_month",DaySelector: ".sel_day"});$.ms_DatePicker();}); </script> <div id="footer"><p>Powered by 允许转载、修改和使用本站的DEMO，但请注明出处：<a href=""></a></p></div><p id="stat"><script type="text/javascript" src="/js/tongji.js"></script></p></body></html>
所需要的js代码，用来计算年月日，包含闰年之类的
(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>function asss(){alert($("#sel_year").val());alert($("#sel_month").val());alert($("#sel_day").val());}</script>
