jQuery年月日选择器是这样的-创新互联

本篇文章为大家展示了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年月日选择器是这样的-创新互联
网站网址：https://www.cdcxhl.com/article40/dsigho.html

成都网站建设公司_创新互联，为您提供外贸建站、网站改版、品牌网站建设、静态网站、微信小程序、网站导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联