所以我试图建立一个日历，这个想法是有日历显示本身，然后有两个3个文本字段，一个日期，月份值和年份。完成后将隐藏两个月和年字段。但是我们的想法是，当您点击日期框时，它会将月份文本字段值与年份一起使用，并插入您点击日期的值。问题是，单击一天时显示的日期只是日历中插入的最后一天的日期。因此，如果显示的下个月的最后一天是第7天，它将只显示第七天。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>calendar tool</title>
</head>
<body>
<table id="calendar01" width="500" height="500">
<tr>
<td id="monthTitle" colspan="9">Month</td>
</tr>
<tr>
<td id="calBack" rowspan="6">
<
</td>
<td id="d0">
d
</td>
<td id="d1">
d
</td>
<td id="d2">
d
</td>
<td id="d3">
d
</td>
<td id="d4">
d
</td>
<td id="d5">
d
</td>
<td id="d6">
d
</td>
<td id="calForward" rowspan="6">
>
</td>
</tr>
<tr>
<td id="d7">
d
</td>
<td id="d8">
d
</td>
<td id="d9">
d
</td>
<td id="d10">
d
</td>
<td id="d11">
d
</td>
<td id="d12">
d
</td>
<td id="d13">
d
</td>
</tr>
<tr>
<td id="d14">
d
</td>
<td id="d15">
d
</td>
<td id="d16">
d
</td>
<td id="d17">
d
</td>
<td id="d18">
d
</td>
<td id="d19">
d
</td>
<td id="d20">
d
</td>
</tr>
<tr>
<td id="d21">
d
</td>
<td id="d22">
d
</td>
<td id="d23">
d
</td>
<td id="d24">
d
</td>
<td id="d25">
d
</td>
<td id="d26">
d
</td>
<td id="d27">
d
</td>
</tr>
<tr>
<td id="d28">
d
</td>
<td id="d29">
d
</td>
<td id="d30">
d
</td>
<td id="d31">
d
</td>
<td id="d32">
d
</td>
<td id="d33">
d
</td>
<td id="d34">
d
</td>
</tr>
<tr>
<td id="d35">
d
</td>
<td id="d36">
d
</td>
<td id="d37">
d
</td>
<td id="d38">
d
</td>
<td id="d39">
d
</td>
<td id="d40">
d
</td>
<td id="d41">
d
</td>
</tr>
<tr>
<td colspan ="9"><input type="text" id="cd0" name="cd0" width="100%"><input type="text" id="ydate" class="hidden"><input type="text" id="mdate" class="hidden"></td>
</tr>
<script>
//tool functions
function ge_(id){
var x = document.getElementById(id);
return x;
}
//Month is 1 based
function daysInMonth(month,year) {
return new Date(year, month, 0).getDate();
}
//create and array for settings//
var setting = new Array();
setting[0] = "#CCCCCC"; //background color for inactive days
setting[1] = "#AAAAAA"; //background color of months
setting[2] = "#AAAAAA"; //background of button back
setting[3] = "#AAAAAA"; //background of button forward
//input settings into elements
ge_("monthTitle").style.textAlign="center";
ge_("monthTitle").style.verticalAlign="middle";
ge_("monthTitle").style.background=setting[1];
ge_("calBack").style.textAlign="center";
ge_("calBack").style.verticalAlign="middle";
ge_("calBack").style.background=setting[2];
ge_("calForward").style.textAlign="center";
ge_("calForward").style.verticalAlign="middle";
ge_("calForward").style.background=setting[3];
ge_("cd0").style.width="100%";
ge_("cd0").style.height="100%";
for(x=0;x<42;x++){
var cName = "d"+x;
ge_(cName).style.background = setting[0];
ge_(cName).style.textAlign = "left";
ge_(cName).style.verticalAlign = "top";
}
//get the current month and date to start calendar
var today = new Date();
var todayyear = today.getFullYear();
var todaymonth = today.getMonth();
var todaydate = today.getDate();
var todayday = today.getDay();
var todaymonth = todaymonth +1;
function fill_calendar(month,year){
var months = new Array();
//name the months
months[0] = "January";
months[1] = "February";
months[2] = "March";
months[3] = "April";
months[4] = "May";
months[5] = "June";
months[6] = "July";
months[7] = "August";
months[8] = "September";
months[9] = "October";
months[10] = "November";
months[11] = "December";
fillDate = new Array();
//get position in calendar
//get the days in the month for previous current and next month//
dmonth = month;
amd = daysInMonth(dmonth,year);
if(dmonth !=1 && dmonth !=12){
pm = dmonth-1;
py = year;
pmd = daysInMonth(pm,py);
nm = dmonth +1;
ny = year;
nmd = daysInMonth(nm,ny);
}else{
if(dmonth == 1){
pm = 12;
py = year-1;
pmd = daysInMonth(pm,py);
nm = dmonth +1;
ny = year;
nmd = daysInMonth(nm,ny);
}
if(dmonth == 12){
pm = dmonth-1;
py = year;
pmd = daysInMonth(pm,py);
nm = 1;
ny = year+1;
nmd = daysInMonth(nm,ny);
}
}
//get the starting day of the month
smd = new Date(year,(month-1),1);
sd = smd.getDay();
pmsd = pmd - (sd-1);
//get days of active month
cd = 0;
while(pmsd<=pmd){
fillDate[cd] = pmsd;
pmsd++;
cd++;
}
for(d=1;d<=amd;d++){
fillDate[cd] = d;
cd++;
}
for(d=1;cd<=41;d++){
fillDate[cd] = d;
d++;
cd++;
}
for(i=0;i<cd;i++){
d = fillDate[i];
cname = "d"+i;
daycell = ge_(cname);
daycell.innerHTML = d;
daycell.onclick = function(){ send_date('cd0',daycell.innerHTML,d) };
}
ge_('ydate').value = year;
ge_('mdate').value = month;
ge_('monthTitle').innerHTML = months[(month-1)];
ge_('calBack').onclick = function() { fill_calendar(pm,py) };
ge_('calForward').onclick = function() { fill_calendar(nm,ny) };
}
var monthFormat = 0;
function send_date(fname,cName,fillDate){
document.write(fillDate);
field = ge_(fname);
field.value = "";
day = fillDate;
cday = ge_(cName);
cday.style.background = setting[0];
cday.style.textAlign = "left";
cday.style.verticalAlign = "top";
month = ge_('mdate').value;
year = ge_('ydate').value;
if(monthFormat == 0){
date = month+"-"+day+"-"+year;
}
document.write(date);
}
fill_calendar(todaymonth,todayyear);
</script>
</body>
</html>
这是我不理解的部分。
for(i=0;i<cd;i++){
d = fillDate[i];
cname = "d"+i;
daycell = ge_(cname);
daycell.innerHTML = d;
daycell.onclick = function(){ send_date('cd0',daycell.innerHTML,d) };
}
如何正确填写日期，但分配的功能仅限于最后一个值？
任何帮助都会很棒