jQuery年月日選擇器是這樣的

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

我們?cè)诰庉嬘脩糍Y料時(shí)經(jīng)常會(huì)遇到選擇生日選項(xiàng)的問題，今天我給大家介紹如何使用js來實(shí)現(xiàn)年月日（生日）選擇器，能夠準(zhǔn)確計(jì)算閏年的年月日，方便表單處理。

HTML

生日中的年月日以<select>下拉方式，我們給每個(gè)select加個(gè)rel屬性，當(dāng)已知用戶生日日期的，直接通過rel屬性標(biāo)注，插件會(huì)將rel屬性值轉(zhuǎn)換成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庫(kù)和選擇器插件：

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

jQuery

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

$(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);    }    // 日列表(僅當(dāng)選擇了年月)    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);

上述內(nèi)容就是jQuery年月日選擇器是這樣的，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。