注册界面生日（日期）js

最新推荐文章于 2026-03-24 11:53:27 发布

原创最新推荐文章于 2026-03-24 11:53:27 发布 · 2.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jQuery #javascript #js日期选择 #js+html生日选择 #jquery日期选择

javascript 专栏收录该内容

24 篇文章

订阅专栏

这篇博客展示了如何使用jQuery创建一个生日选择器。通过动态生成年、月、日的选项，实现了日期选择功能，并根据所选年份和月份自动调整日期范围，确保日期的有效性。代码中还包含了闰年的判断逻辑。

<html>
<body>
<select class="gbiaps_birthday_year"></select>
<select class="gbiaps_birthday_month"></select>
<select class="gbiaps_birthday_day"></select>
</body>
</html>


 jQuery.noConflict();
        jQuery(function ($) {
            var $birthYear = $('.gbiaps_birthday_year');
            var year = new Date().getFullYear();
            $('<option value="' + (year) + '" selected="selected" >' + (year) + '</option>').appendTo($birthYear);
            for (var i = 1; i <= 100; i++) {
                var y = year - i;
                $('<option value="' + y + '" >' + y + '</option>').appendTo($birthYear);
            }

            var $birthMonth = $('.gbiaps_birthday_month');
			var month = new Date().getMonth();
            $('<option value="'+(month+1)+'" selected="selected">'+(month+1)+'</option>').appendTo($birthMonth);
            for (var m = month; m >0; m--) {
                $('<option value="' + m + '">' + m + '</option>').appendTo($birthMonth);
            }
			
			//设置最新月份的日期
			function initDate(){
				var year1 = new Date().getFullYear();
                var month1 = new Date().getMonth()+1;
				var i = 0;
				switch (month1 - 0) {
                    case 4:
                    case 6:
                    case 9:
                    case 11:
						i = 30;
						break;
					case 1:
					case 3:
					case 5:
					case 7:
					case 8:
					case 10:
					case 12:
						i = 31;
						break;
					case 2:
						if (!isLeapYear(year1)){
							i=28;
						}else{
							i=29;
						}
						break;
					default:
						i=31;
						break;
					}
					return i;
			}
			
            var $birthDay = $('.gbiaps_birthday_day');
            $('<option value="1"selected="selected">1</option> ').appendTo($birthDay);
            for (var d = 2; d <= initDate(); d++) {
                $('<option value="' + d + '" >' + d + '</option> ').appendTo($birthDay);
            }

            $birthYear.change(onBirthChange);
            $birthMonth.change(onBirthChange);
            $birthDay.change(onBirthChange);

            function onBirthChange() {
                var year = $birthYear.find('option:selected').val();
                var month = $birthMonth.find('option:selected').val();
                var day = $birthDay.find('option:selected').val();
//                console.log('year: '+year+' month : '+month+" day: "+day);
                switch (month - 0) {
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        if (day > 30) {
                            setBirthDate(year, month, 30);
                        }
                        $birthDay.find('option[value="29"]').show();
                        $birthDay.find('option[value="30"]').show();
                        $birthDay.find('option[value="31"]').hide();
                        break;
                    case 2:

                        if (!isLeapYear(year)) {
                            $birthDay.find('option[value="29"]').hide();
                            if (day > 28)
                                setBirthDate(year, 2, 28);
                        } else if (day > 29) {
                            setBirthDate(year, 2, 29);
                            $birthDay.find('option[value="29"]').show();
                        }
//                        console.log('2');
                        $birthDay.find('option[value="30"]').hide();
                        $birthDay.find('option[value="31"]').hide();
                        break;
                    default:
                        $birthDay.find('option[value="29"]').show();
                        $birthDay.find('option[value="30"]').show();
                        $birthDay.find('option[value="31"]').show();
                        break;
                }

            }

            /**
             判断year是否闰年
             */
            function isLeapYear(year) {
                return(0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
            }

            function setBirthDate(year, month, day) {
                $birthYear.val(year);
                $birthMonth.val(month);
                $birthDay.val(day);
            }

        });