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

十余年的阿合奇網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整阿合奇建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“阿合奇網(wǎng)站設(shè)計(jì)”,“阿合奇網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

HTML

生日中的年月日以<select>下拉方式，我們給每個(gè)select加個(gè)rel屬性，當(dāng)已知用戶生日日期的，直接通過(guò)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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)名稱：jQuery年月日選擇器是這樣的-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://jinyejixie.com/article40/dsigho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站改版、品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、微信小程序、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)