效果图:
不用在数据库存储这些日期数据,直接通过JS动态生成
代码如下:
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td>
<select id="year" οnchange="changeday()" name="year"><option value="">年</option></select>
<select id="month" name="month" οnchange="changeday()"><option value="">月</option></select>
<select id="day" name="day"><option value="">日</option></select>
<script type="text/javascript" language="javascript">
var curdate = new Date();
var year = document.getElementById("year");
var month = document.getElementById("month");
var day = document.getElementById("day");
//绑定年份月分的默认
function add() {
var curyear = curdate.getFullYear();
var minyear = curyear - 80;
var maxyear = curyear;
for (maxyear; maxyear >= minyear; maxyear = maxyear - 1) {
year.options.add(new Option(maxyear, maxyear));
}
for (var mindex = 1; mindex <= 12; mindex++) {
month.options.add(new Option(mindex, mindex));
}
}
//判断是否是闰年
function leapyear(intyear) {
var result = false;
if (((intyear % 400 == 0) && (intyear % 100 != 0)) || (intyear % 4 == 0)) {
result = true;
}
else {
result = false;
}
return result;
}
//绑定天数
function addday(maxday) {
day.options.length = 1;
for (var dindex = 1; dindex <= maxday; dindex++) {
day.options.add(new Option(dindex, dindex));
}
}
function changeday() {
if (year.value == null || year.value == "") {
alert("请先选择年份!");
return false;
}
else {
if (month.value == 1 || month.value == 3 || month.value == 5 || month.value == 7 || month.value == 8 || month.value == 10 || month.value == 12) {
addday(31);
}
else {
if (month.value == 4 || month.value == 6 || month.value == 9 || month.value == 11) {
addday(30);
}
else {
if (leapyear(year.value)) {
addday(29);
}
else {
addday(28);
}
}
}
}
}
window.onload = add;
</script>
</td>
</tr>
</table>
</body>
</html>
下面是封装好的,放到JS文件里
/****************************************横排日期(年月日)***********************************************/
//obj数组类型:yearID表示年ID,monthID表示月ID,dayID表示日ID
TimeInit = function (obj) {
if (obj.yearID && obj.monthID && obj.dayID) {
add(obj);
$("#" + obj.yearID).change(function () { changeday(obj) });
$("#" + obj.monthID).change(function () { changeday(obj) });
}
else if (obj.yearID && obj.monthID && obj.dayID==null) {
add(obj);
}
}
//给年月日赋值,strTime形式:yyyy-MM-dd
Time2Value = function (obj, strTime) {
var yymmdd = strTime.split("-");
if (obj.yearID && obj.monthID && obj.dayID) {
$("#" + obj.yearID).val(yymmdd[0]);
changeday(obj);
$("#" + obj.monthID).val(yymmdd[1]);
changeday(obj);
$("#" + obj.dayID).val(yymmdd[2]);
}
else if (obj.yearID && obj.monthID && obj.dayID == null) {
$("#" + obj.yearID).val(yymmdd[0]);
$("#" + obj.monthID).val(yymmdd[1]);
}
};
//绑定年份月分的默认
add = function (obj) {
var curdate = new Date();
var year = $("#" + obj.yearID);
var month = $("#" + obj.monthID);
var curyear = curdate.getFullYear();
var minyear = curyear - 80;
var maxyear = curyear;
for (maxyear; maxyear >= minyear; maxyear = maxyear - 1) {
year.append("<option value='" + maxyear + "'>" + maxyear + "</option>");
}
for (var mindex = 1; mindex <= 12; mindex++) {
var monthNum;
if (mindex < 10)
monthNum = "0" + mindex;
else
monthNum = mindex;
month.append("<option value='" + monthNum + "'>" + monthNum + "</option>");
}
}
//判断是否是闰年
leapyear=function(intyear) {
var result = false;
if (((intyear % 400 == 0) && (intyear % 100 != 0)) || (intyear % 4 == 0)) {
result = true;
}
else {
result = false;
}
return result;
}
//绑定天数
addday=function(dayid, maxday) {
var day = document.getElementById(dayid);
day.options.length = 1;
for (var dindex = 1; dindex <= maxday; dindex++) {
var dayNum;
if (dindex < 10)
dayNum = "0" + dindex;
else
dayNum = dindex;
day.options.add(new Option(dayNum, dayNum));
}
}
changeday = function (obj) {
var year = $("#" + obj.yearID);
var month = $("#" + obj.monthID);
var day = obj.dayID;
if (year.val() == null || year.val() == "") {
alert("请先选择年份!");
return false;
}
else {
if (month.val() == 1 || month.val() == 3 || month.val() == 5 || month.val() == 7 || month.val() == 8 || month.val() == 10 || month.val() == 12) {
addday(day, 31);
}
else {
if (month.val() == 4 || month.val() == 6 || month.val() == 9 || month.val() == 11) {
addday(day, 30);
}
else {
if (leapyear(year.val())) {
addday(day, 29);
}
else {
addday(day, 28);
}
}
}
}
}
用法如下,引用一下
var objTime = { "yearID": "year", "monthID": "month", "dayID": "day" };
var strTime = $("#BirthdayTime").val();
TimeInit(objTime);
Time2Value(objTime, strTime);