本篇文章為大家展示了jQuery年月日選擇器是這樣的，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

十余年的阿合奇網站建設經驗，針對設計、前端、開發、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網營銷的優勢是能夠根據用戶設備顯示端的尺寸不同，自動調整阿合奇建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優雅布局與設計，從而大程度地提升瀏覽體驗。成都創新互聯從事“阿合奇網站設計”,“阿合奇網站推廣”以來，每個客戶項目都認真落實執行。

我們在編輯用戶資料時經常會遇到選擇生日選項的問題，今天我給大家介紹如何使用js來實現年月日（生日）選擇器，能夠準確計算閏年的年月日，方便表單處理。

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庫和選擇器插件：

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

jQuery

我們將選擇器封裝成jQuyer插件的形式，只需使用以下方式調用即可：

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

以下是插件的具體代碼：

(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);

上述內容就是jQuery年月日選擇器是這樣的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。

網頁名稱：jQuery年月日選擇器是這樣的-創新互聯
網站網址：http://www.2m8n56k.cn/article40/dsigho.html

成都網站建設公司_創新互聯，為您提供外貿建站、網站改版、品牌網站建設、靜態網站、微信小程序、網站導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯