关于一个带有CheckBox 多选日期的日历

阿土伯土 2004-06-17 12:16:41

calendarBox.js

document.write('<iframe id=CalFrame name=CalFrame frameborder=0 src=calendarBox.htm style=display:none;position:absolute;z-index:100></iframe>');
document.onclick=hideCalendar;

function showCalendar(sImg,bOpenBound,sFld1,sFld2,sCallback)
{
var fld1,fld2;
var cf=document.getElementById("CalFrame");
var wcf=window.frames.CalFrame;
var oImg=document.getElementById(sImg);
if(!oImg){alert("控制对象不存在！");return;}
if(!sFld1){alert("输入控件未指定！");return;}
fld1=document.getElementById(sFld1);
if(!fld1){alert("输入控件不存在！");return;}
if(fld1.tagName!="INPUT"||fld1.type!="text"){alert("输入控件类型错误！");return;}
if(sFld2)
{
fld2=document.getElementById(sFld2);
if(!fld2){alert("参考控件不存在！");return;}
if(fld2.tagName!="INPUT"||fld2.type!="text"){alert("参考控件类型错误！");return;}
}
if(!wcf.bCalLoaded){alert("日历未成功装载！请刷新页面！");return;}
if(cf.style.display=="block"){cf.style.display="none";return;}

var eT=0,eL=0,p=oImg;
var sT=document.body.scrollTop,sL=document.body.scrollLeft;
var eH=oImg.height,eW=oImg.width;
while(p&&p.tagName!="BODY"){eT+=p.offsetTop;eL+=p.offsetLeft;p=p.offsetParent;}
cf.style.top=(document.body.clientHeight-(eT-sT)-eH>=cf.height)?eT+eH:eT-cf.height;
cf.style.left=(document.body.clientWidth-(eL-sL)>=cf.width)?eL:eL+eW-cf.width;
cf.style.display="block";

wcf.openbound=bOpenBound;
wcf.fld1=fld1;
wcf.fld2=fld2;
wcf.callback=sCallback;
wcf.initCalendar();
}
function hideCalendar()
{
var cf=document.getElementById("CalFrame");
cf.style.display="none";
}

calendarBox.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type=text/css>
td{font-size:12;font-home:arial;text-align:center}
td.dt{font-size:11;font-home:arial;text-align:left}
a{color:blue}
a:hover{color:red}
a.bt{color:#888888}
</style>
<script language=javascript>

</script>
</head>

<body topmargin=0 leftmargin=0 bottommargin=0 rightmargin=0 onload="resizeCalendar();">
<table id=tbl0 bgcolor=#336699 border=0 cellpadding=1 cellspacing=0><tr><td>
<table width=100% border=0 cellpadding=2 cellspacing=1 bgcolor=white>
<tr bgcolor=gray>
<td width=16 id=prev><a href=javascript:drawCalendar(yy,mm-1);><img src=/Images/prev.gif border=0 width="16" height="16"></a></td>
<td width=99% id=yyyymm style=font-size:11;color:white></td>
<td width=16 id=next><a href=javascript:drawCalendar(yy,mm+1);><img src=/Images/next.gif border=0 width="16" height="16"></a></td>
</tr>
</table>
<table width=142 border=0 bgcolor=white cellpadding=0 cellspacing=2>
<tr height=18><td width=18><font color=red>日</font></td><td width=18>一</td><td width=18>二</td><td width=18>三</td><td width=18>四</td><td width=18>五</td><td width=18><font color=green>六</font></td></tr>
<tr height=1><td colspan=7 bgcolor=gray></td></tr>
<script language=javascript>

</script>
<tr height=1><td colspan=7 bgcolor=gray></td></tr>
<tr height=18><td colspan=7><a href="javascript:alert(document.all.CalendarBox.value);">提交</font></a> <a href="javascript:wp.hideCalendar();">关闭</font></a></td></tr>
</table>
</td></tr></table>
<script language=javascript>

</script>

</body>
</html>

test.htm

<script language="JavaScript" src="calendarBox.js"></script>
<input name="outDate" type="text" size="6" id="outDate">
<A onclick=event.cancelBubble=true; href="javascript:showCalendar('dimg1',false,'outDate')"><img src="/Hotel/Images/calendar.gif" width="34" height="21" border="0" align="absmiddle" id=dimg1></A>

问题：
请问如何将各个日期提交到同一输入框
例如：将 2004－6－7 和 2004－7－8 两个日期或更多日期提交到输入框

...全文

627 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

zldjjf50 2010-06-09

打赏
举报

什么东西？太长了一百行就能完成的

方舟 2004-06-22

打赏
举报

你的代码很难以上功能
建议你开始就弹出12个月份的日期给它选择

阿土伯土 2004-06-22

打赏
举报

啊，12 个月的日期！那整个屏幕岂不会变的非常之大！

阿土伯土 2004-06-21

打赏
举报

谢谢PoPoTang(PoPoTang) 。你的函数管用，可是，如果退回去选择另外一个月份，再返回来，那么刚才所选的日历天数就不见了。

另外，还有，如果已知已经选择了 10个天数在这个Input输入框，如果要修改这些日期，用什么方式比较好。

阿土伯土 2004-06-19

打赏
举报

52juanjuan(Fibona) 的没有带CheckBox

方舟 2004-06-18

打赏
举报

碰巧要搞类似东东，楼主的代码省了我时间,可惜无图片:<
写个循环取getValue函数，可以了，
var theValue=" ";
for (i=0;i<CalendarBox.length;i++){
if(CalendarBox[i].checked) {
theValue=setDate(CalendarBox[i].value)+","+theValue;
}
}

fld1.value=theValue;

阿土伯土 2004-06-18

打赏
举报

非常感谢您的回复，能否把您的代码大包成一个RAR给俺吗，多谢。

kingdomzhf 2004-06-17

打赏
举报

这么长

52juanjuan 2004-06-17

打赏
举报

楼主的我看了一下认为结构不太完整所以没有直接修改，而是用了一个自己的

52juanjuan 2004-06-17

打赏
举报

<SCRIPT>

</SCRIPT>
</BODY>
</HTML>

52juanjuan 2004-06-17

打赏
举报

第二个文件显示日历，以便进行日期的选择取名为calendar.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>
.pop
{
FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: 宋体, "Arial"
}
.hdr
{
BACKGROUND: #ffffdd
}
.hdrA
{
CURSOR: hand
}
.ndt
{
WIDTH: 19px; POSITION: absolute; HEIGHT: 19px
}
.bdt
{
WIDTH: 19px; POSITION: absolute; HEIGHT: 19px
}
.dt
{
WIDTH: 19px; CURSOR: hand; POSITION: absolute; HEIGHT: 19px
}
.sdt
{
WIDTH: 19px; POSITION: absolute; HEIGHT: 19px
}
</STYLE>

<META content="MSHTML 5.50.4522.1800" name=GENERATOR>
</HEAD>

<BODY text=#000000 vLink=#990000 aLink=#990000 link=#990000 bgColor=#ffffff onload=DoLoad()>
<BASEFONT face="Arial,Helvetica,Geneva,Swiss,Sans Serif">
<TABLE style="BORDER-RIGHT: #111177 1px solid; BORDER-TOP: #111177 1px solid; BACKGROUND: white; FONT: 8pt arial; BORDER-LEFT: #111177 1px solid; BORDER-BOTTOM: #111177 1px solid" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD height=20>
<TABLE style="FONT: 8pt arial" height=20 cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=hdrA id=PrevDiv width=20>
<IMG id=Prev onclick=PC(); height=21 alt="Show Previous Month" src="prev.gif" width=20 align=absMiddle>
</TD>
<TD class=hdr align=middle width=101>
<SPAN id=YearTitle></SPAN> .
<SPAN id=MonthTitle></SPAN>
</TD>
<TD class=hdrA id=NextDiv width=20>
<IMG id=Next onclick=NC(); height=21 alt="Show Next Month" src="next.gif" width=20 align=absMiddle>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>

<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD><IMG id=WeekImg height=20 src="week0.gif"
width=141>
</TD>
</TR>
<TR>
<TD style="POSITION: relative" align=middle>
<img class=sdt id=SelDate style="DISPLAY: none; background-color: #99FFFF; layer-background-color: #99FFFF; border: 1px none #000000" height=19 src="seldate.gif" width=19>
<img id=MonthImg style="LEFT: 0px; POSITION: relative; TOP: 0px" height=121 src="nodate.gif" width=141>
<DIV id=BKIMG1>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
<IMG height=19 src="date.gif" width=19>
</DIV>
<IMG class=ndt id=Today style="DISPLAY: none" onclick=TC() height=19 src="ring.gif" width=19>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD align=right height=20>
<A class=pop href="javascript:CC()">Close Window</A>
</TD>
</TR>
</TBODY>
</TABLE>

52juanjuan 2004-06-17

打赏
举报

52juanjuan 2004-06-17

打赏
举报

不知道楼主是不是要的这种结果：
可能显示不全就是日期因为采用的图片这里面没有所以有点模糊

第一个文件test.html进行测日期的主页面。
<HTML>
<HEAD>
<title>Query user</title>

</HEAD>
<script language="javascript">
function isDateString(sDate)
{ var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]
var iaDate = new Array(3)
var year, month, day

if (arguments.length != 1)
return false
iaDate = sDate.toString().split("-")
if (iaDate.length != 3)
return false
if (iaDate[1].length > 2 || iaDate[2].length > 2)
return false

year = parseFloat(iaDate[0])
month = parseFloat(iaDate[1])
day=parseFloat(iaDate[2])

if (year < 1900 || year > 2100)
return false
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0))
iaMonthDays[1]=29;
if (month < 1 || month > 12)
return false
if (day < 1 || day > iaMonthDays[month - 1])
return false

if (day % 1 != 0)
return false

return true
}

function stringToDate(sDate, bIgnore)
{
var bValidDate, year, month, day
var iaDate = new Array(3)

if (bIgnore) bValidDate = true
else bValidDate = isDateString(sDate)

if (bValidDate)
{
iaDate = sDate.toString().split("-")
year = parseFloat(iaDate[0])
month = parseFloat(iaDate[1]) - 1
day=parseFloat(iaDate[2])
return (new Date(year,month,day))
}
else return (new Date(1900,1,1))
}

var g_MINY=1601;
var g_MAXY=4500;
var g_month=0;
var g_day=0;
var g_year=0;
var g_yLow=1990;

function GetInputDate(t,f)
{
var l=t.length;
if(0==l)
return false;

var cSp='\0';var sSp1="";
var sSp2="";

for(var i=0;i<t.length;i++)
{
var c=t.charAt(i);

if(c==' '||isdigit(c))continue;else if(cSp=='\0'&&(c=='/'||c=='-'||c=='.'))
{
cSp=c;
sSp1=t.substring(i+1,l);
}
else if(c==cSp)
sSp2=t.substring(i+1,l);
else if(c!=cSp)
return false;
}

if(0==sSp1.length)
return false;

var m;
var d;
var y;

if(g_dFmt=="mmddyy")
{
m=atoi(t);
d=atoi(sSp1);
}
else
{
d=atoi(t);
m=atoi(sSp1);
}

if(0!=sSp2.length)
y=atoi(sSp2);
else
y=DefYr(m,d);

if(y<100)
{
y=1900+y;
while(y<g_yLow)
y=y+100;
}

if(y<g_MINY||y>g_MAXY||m<1||m>12)
return false;

if(d<1||d>GetMonthCount(m,y))
return false;

g_month=m;
g_day=d;
g_year=y;
return true;
}

function DefYr(m,d)
{
var dt=new Date();
var yCur=(dt.getYear()<1000)?1900+dt.getYear():dt.getYear();

if(m-1<dt.getMonth()||(m-1==dt.getMonth()&&d<dt.getDate()))
return 1+yCur;
else return yCur;
}

function atoi(s)
{
var t=0;
for(var i=0;i<s.length;i++)
{
var c=s.charAt(i);

if(!isdigit(c))
return t;
else
t=t*10+(c-'0');
}
return t;
}

function isdigit(c)
{
return(c>='0'&&c<='9');
}

function GetMonthCount(m,y)
{
var c=rgMC[m-1];
if((2==m)&&IsLeapYear(y))
c++;
return c;
}

function IsLeapYear(y)
{
if(0==y%4&&((y%100!=0)||(y%400==0)))
return true;
else
return false;
}

var rgMC=new Array(12);
rgMC[0]=31;
rgMC[1]=28;
rgMC[2]=31;
rgMC[3]=30;
rgMC[4]=31;
rgMC[5]=30;
rgMC[6]=31;
rgMC[7]=31;
rgMC[8]=30;
rgMC[9]=31;
rgMC[10]=30;
rgMC[11]=31;
var g_eC=null;
var g_eCV="";
var g_dFmt="yymmdd";
var g_fnCB=null;

function ShowCalendar(eP,eD,eDP,dmin,dmax,fnCB)
{
var dF=document.all.CalFrame;
var wF=window.frames.CalFrame;

if(null==wF.g_fCalLoaded||false==wF.g_fCalLoaded)
{
alert("Unable to load popup calendar.\r\nPlease reload the page.");
return;
}

dtMin=new Date();
dtMin.setDate(dtMin.getDate()+dmin);
dtMax=new Date();
dtMax.setDate(dtMax.getDate()+dmax);
wF.SetMinMax(new Date(dtMin),new Date(dtMax));
g_fnCB=fnCB;
wF.cityname(fnCB);

if(eD==g_eC&&"block"==dF.style.display)
{
if(g_eCV!=eD.value&&GetInputDate(eD.value,g_dFmt))
{
wF.SetInputDate(g_day,g_month,g_year);
wF.SetDate(g_day,g_month,g_year);
g_eCV=eD.value;
}
else
dF.style.display="none";
}
else
{
if(GetInputDate(eD.value,g_dFmt))
{
wF.SetInputDate(g_day,g_month,g_year);
wF.SetDate(g_day,g_month,g_year);
}
else
if(null!=eDP&&GetInputDate(eDP.value,g_dFmt))
{
wF.SetInputDate(g_day,g_month,g_year);
wF.SetDate(g_day,g_month,g_year);
}
else
{
var dt=new Date(dtMin);
wF.SetInputDate(-1,-1,-1);
wF.SetDate(dt.getDate(),dt.getMonth()+1,dt.getFullYear());
}

var eL=0;
var eT=0;
var p=eP;

while(p&&p.tagName!="BODY")
{
eT+=p.offsetTop;
eL+=p.offsetLeft;
p=p.offsetParent;
}

var eH=eP.offsetHeight;
var dH=dF.style.pixelHeight;
var sT=document.body.scrollTop;
dF.style.left=eL;

if(eT-dH>=sT&&eT+eH+dH>document.body.clientHeight+sT)
dF.style.top=eT-dH;
else
dF.style.top=eT+eH;

if("none"==dF.style.display)
dF.style.display="block";

g_eC=eD;
g_eCV=eD.value;
}
}

function SetDate(d,m,y)
{
var ds="-";
g_eC.focus();

if(g_dFmt=="mmddyy")
if (m<10) {
if (d<10)
g_eC.value="0"+m+ds+"0"+d+ds+y;
else
g_eC.value="0"+m+ds+d+ds+y;
}
else {
if (d<10)
g_eC.value=m+ds+"0"+d+ds+y;
else
g_eC.value=m+ds+d+ds+y;
}
else
if(g_dFmt=="yymmdd")
if (m<10) {
if (d<10)
g_eC.value=y+ds+"0"+m+ds+"0"+d;
else
g_eC.value=y+ds+"0"+m+ds+d;
}
else {
if (d<10)
g_eC.value=y+ds+m+ds+"0"+d;
else
g_eC.value=y+ds+m+ds+d;
}
else
g_eC.value=s+ds+m+ds+y;

g_eCV=g_eC.value;

if(null!=g_fnCB&&""!=g_fnCB)
eval(g_fnCB);
}

function GetDowStart()
{
return 0;
}

function GetDOW2(d,m,y)
{
var dt=new Date(y,m-1,d);
return(dt.getDay()+(7-GetDowStart()))%7;
}

function LoadMonths(n)
{
var dt=new Date();
var m=dt.getMonth()+1;
var y=dt.getFullYear();
var rg=new Array(n);

for(i=0;i<n;i++)
{
rg[i]=document.createElement("IMG");
rg[i].src="/images/elements/calendar/w"+GetDOW2(1,m,y)+"d"+GetMonthCount(m,y)+".gif";m++;

if(12<m)
{
m=1;
y++;
}
}
}

LoadMonths(12);

function chkBrowser()
{
this.ver=navigator.appVersion;
this.dom=document.getElementById?1:0;
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bVer=(this.ie5 || this.ie4 || this.ns4 || this.ns5);
return this;
}

bVer=new chkBrowser();
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

function AttB(f)
{
if(bVer.ie4)
f.style.display='block';
}

function AttN(f)
{
if(bVer.ie4)
f.style.display='none';
}

6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...