使用jquery製作日曆（生日）選擇器

一.基本網頁HTML

生日中的年月日以<select>下拉方式，我們給每個select加個rel屬性，當已知使用者生日日期的，直接通過rel屬性標註，外掛會將rel屬性值轉換成select的值。

<label> 生日：</label>  
<select class="sel_year" rel="2000"> </select> 年 
<select class="sel_month" rel="2"> </select> 月 
<select class="sel_day" rel="14"> </select> 日 

二.載入jquery庫跟birthday.js

<script src="jquery.js"></script> 
<script src="birthday.js"></script> 

三.將選擇器封裝成jQuery的形式，只需要以下列方式呼叫即可

$(function () { 
    $.ms_DatePicker({ 
            YearSelector: ".sel_year", 
            MonthSelector: ".sel_month", 
            DaySelector: ".sel_day" 
    }); 
}); 

四.birthday.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);

五.本文轉載自：http://www.helloweba.com/view-blog-263.html