下载地址：https://www.helloweba.net/javascript/263.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery年月日（生日）选择器</title>
<style>
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="demo">
<p>
默认值：<br/>
<label>生日：</label>
<select class="sel_year" rel="2000"></select>年
<select class="sel_month" rel="2"></select>月
<select class="sel_day" rel="14"></select>日
</p>
</div>
<script type="text/javascript" src="birthday.js"></script>
<script>
$(function() {
$.ms_DatePicker({
YearSelector: ".sel_year",
MonthSelector: ".sel_month",
DaySelector: ".sel_day"
});
$.ms_DatePicker();
});
</script>
</body>
</html>
birthday.js内容：(来自github)
(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);
怎么得到选择的值？
function getBirthday() {
var date = "";
date += $(".sel_year").val();
date += "-";
if (parseInt($(".sel_month").val()) < 10) {
date += "0";
date += $(".sel_month").val();
} else {
date += $(".sel_month").val();
}
date += "-";
if (parseInt($(".sel_day").val()) < 10) {
date += "0";
date += $(".sel_day").val();
} else {
date += $(".sel_day").val();
}
return date;
}
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。
