jQuery年月日(生日)选择器

2014年07月25日 22:51helloweba.com 作者:月光光 标签:jQuery 

我们在编辑用户资料时经常会遇到选择生日选项的问题,今天我给大家介绍如何使用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);
声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/263.html

9条评论

  • Rancho

    我的错,是我修改了东西忘改回来了

  • Rancho

    chorme不兼容吗?怎么下拉列表里没有值

  • 使用 $(".sel_year").attr('rel','数据库获取的年份') 设置默认值,设置不了,用户的生日是动态加载的,你上面直接在页面上加rel属性是不可行的

  • 好棒, 谢谢分享~~

  • 想知道怎么得到选择的值啊?

  • 赞赞赞[给力]

  • 不错,挺实用的一个小功能!收了,谢谢博主!

  • demo中的默认值就是选中状态的,设置select的rel属性。

  • 如何设置某月,某年,某日为选中状态?方便修改信息!