jQuery年月日選擇器是這樣的-創(chuàng)新互聯(lián)

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

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

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

HTML

生日中的年月日以<select>下拉方式，我們給每個select加個rel屬性，當已知用戶生日日期的，直接通過rel屬性標注，插件會將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庫和選擇器插件：

<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);    }    // 日列表(僅當選擇了年月)    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年月日選擇器是這樣的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

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

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

廣告

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