如何在网页中，弹出日期选择窗口？

veilen 2002-08-02 04:43:03

如何在网页中，弹出日期选择窗口？

...全文

611 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

xg_delayth 2002-08-02

打赏
举报

//***********************************************************************************************************************
//--- Function: create the main show-string
//--- Return:
//--- Parameters:
//--- Create time: 2002-07-30 Change time: 2002-07-30
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_ShowCalender(){
var tmpOut="";
//-- add the table of main container
tmpOut+="<TABLE BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF' align=center width=100%>";
tmpOut+="<tr><td>"

tmpOut+="<table align=center bgcolor='#C8E3FF' width=100%><tr>";

tmpOut+="<td align=left>";
tmpOut+="<span style='color:#40c35a;cursor:hand' onclick='spanPrev_onclick();' title='previous month'";
tmpOut+=">《</span>";
tmpOut+="</td>";

tmpOut+="<td align=center><span id=formatTime style='width:100%;' ondblclick='formatTime_onclick();'>";
tmpOut+="<FONT STYLE='font-size:9pt;Color:#330099'><span id=span_formatTime>";
tmpOut+=this.xg_FormatTime();
tmpOut+="</span></font></span></td>";

tmpOut+="<td align=right>";
tmpOut+="<span style='color:#40c35a;cursor:hand' onclick='spanBehind_onclick();' title='behind month'"
tmpOut+=">》</span>";
tmpOut+="</td>";

tmpOut+="</tr></table>";

tmpOut+="<table border='1' align='center'>";
tmpOut+=this.xg_MainCalender();
tmpOut+="</table>";

tmpOut+="<table align='center' style='width:100%' bgcolor=#C8E3FF><tr><td style='width:100%' align=center>";
tmpOut+="<b><FONT STYLE='font-size:9pt;Color:#34256d'>";
tmpOut+="<span id=span_current align=center>";
tmpOut+="</span></font></b>";
tmpOut+="</td></tr></table>";

tmpOut+="</td></tr>";

return tmpOut;
}
//***********************************************************************************************************************
//--- Function: check the time input,it can be many modes like
//--- ('YYYY-MM-DD','YYYY/MM/DD','YYYY:MM:DD'. and so on)
//--- Return: if legality return the time else return ""
//--- Parameters:
//--- ATimeString: the String of time input
//--- AIsCheck: if AIsCheck is 0 chen not judge the legality of the input string
//--- Create time: 2002-07-30 Change time: 2002-07-30
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_GetTime(ATimeString,AIsCheck){
var reg=/^(\d{1,4})(-|\/|\:)(\d{1,2})\2(\d{1,2})$/;
var timeArray=ATimeString.match(reg);
var tmpString="";
try{
//-- create the new date by the input string
var tmpDate=new Date(timeArray[1],timeArray[3]-1,timeArray[4]);
if (0==AIsCheck) return tmpDate;
//-- create the judge string by the tmpDate
var tmpYear=(""+tmpDate.getFullYear()).substring(4-timeArray[1].length,4);
tmpString=tmpDate.getMonth()+1;
if (2!=(""+tmpString).length) {
tmpString="0"+tmpString;
}
var tmpMonth=timeArray[3].length==2?tmpString:tmpString.substring(1,2);
tmpString=tmpDate.getDate();
if (2!=(""+tmpString).length) {
tmpString="0"+tmpString;
}
var tmpDay=timeArray[4].length==2?tmpString:tmpString.substring(1,2);
//-- if the input string not equal the time then return ""
if (ATimeString==tmpYear+timeArray[2]+tmpMonth+timeArray[2]+tmpDay){
return tmpDate;
} else{
return "";
}
} catch(e){
return "";
}
}
//***********************************************************************************************************************
//--- Function: Be touched when the cell in main table be clicked,
//--- if the clicked cell is the time of xgCalender.FTime,change the xgCalender.FTime to the clicked time
//--- and change the show of main table and the title of main table
//--- Return:
//--- Parameters:
//--- ASpanID: the span-object's id-number
//--- Create time: 2002-07-30 Change time: 2002-07-30
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_span_onclick(ASpanID){
var tmpInner="";
var currentDate=xgCalender.FTime.getDate();
if (ASpanID!=currentDate){
//-- change the checked cell
eval("span"+ASpanID+".style.backgroundColor='#FF8040'");
tmpInner="<FONT STYLE=font-size:9pt;Color:#ffffff>"+ASpanID+"</font>";
eval("span"+ASpanID+".innerHTML='"+tmpInner+"'");

eval("span"+currentDate+".style.backgroundColor='#ffffff'");
tmpInner="<FONT STYLE=font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066>"+currentDate+"</font>";
eval("span"+currentDate+".innerHTML='"+tmpInner+"'");
}
xgCalender.FTime.setDate(ASpanID);
//-- change the title of main table
span_formatTime.innerText=xgCalender.xg_FormatTime();
}
//***********************************************************************************************************************
//--- Function: when the span-object of "span_formatTime" be double-clicked,it will be touched off.
//--- It will change the innerHTML of the span-object of "span_formatTime"
//--- ,be replaced by the input-object-text of "txtFormatTime"
//--- ,"txtFormatTime" can incept the input of time-string
//--- Return:
//--- Parameters:
//--- Create time: 2002-07-30 Change time: 2002-07-30
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function formatTime_onclick(){
var tmpInner="";
with(xgCalender.FTime){
tmpInner+="<input type='text' name=txtFormatTime value='"+getFullYear()+"-"+(getMonth()+1)+"-"+getDate()+"'";
tmpInner+=" onkeydown='txtFormatTime_onkeydown();' onpaste='return false;' ";
tmpInner+="style='border-top-style:none;border-right-style:none;border-left-style:none;border-bottom-style:none;background-color:#C8E3FF'>";
tmpInner+="<input type=text style='width:1' style='border-top-style:none;border-right-style:none;border-left-style:none;border-bottom-style:none;>"
formatTime.innerHTML=tmpInner;
fmCalender.txtFormatTime.focus();
fmCalender.txtFormatTime.select();
}
}
//***********************************************************************************************************************
//--- Function: Be touched of when you press the "Enter keyboard",it will create the new time object by the input string
//--- Return:
//--- Parameters:
//--- Create time: 2002-07-30 Change time: 2002-07-30
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function txtFormatTime_onkeydown(){
if (window.event.keyCode==13){
xgCalender=new xg_Calender(fmCalender.txtFormatTime.value,0);
divID.innerHTML=xgCalender.xg_ShowCalender();
xg_GetCurrentTime(1);
}
}
//***********************************************************************************************************************

xg_delayth 2002-08-02

打赏
举报

xg_delayth 2002-08-02

打赏
举报

最今写了一个日历程序那出来玩玩，别介意着个并不针对你不过可以用，双击日期就可以
<input type="button" value="日期选择" name="selectdate"
onclick="window.open('myCalender.html','日期选择','height=220,width=380,status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=no')">
<input type="text" name="txtTest" value="">

myCalender.html

<HTML>
<HEAD>
<TITLE> xg_delayth's Calender </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language=javascript>
//***********************************************************************************************************************
//--- Function: Define the class of xg_Calender to deal with the time object behind
//--- Return: if all ok return 0 else return -1
//--- Parameters:
//--- ATimeString:the input time-string for example '2002-09-10','02/12/20','2003:2:9'
//--- AIsCheck:if 0 not judge the legality of ATimeString
//--- Create time: 2002-07-30 Change time: 2002-07-30
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_Calender(ATimeString,AIsCheck){
this.FTime=xg_GetTime(ATimeString,AIsCheck);
if (this.FTime=="") {
return -1;
} else{
//-- store the days of the current year
if (0<checkLeapYear(this.FTime.getYear())){
this.FMonthArray=new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
} else {
this.FMonthArray=new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
}
//-- store the name of month
this.FMonthNames=new Array("January","February","Mar","April","May","June","July","August","September","October"
,"November","December");
//-- store the name of week
this.FWeekDayNames=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
this.xg_FormatTime=xg_FormatTime;
this.xg_MainCalender=xg_MainCalender;
this.xg_ShowCalender=xg_ShowCalender;
}
return 0;
}
//***********************************************************************************************************************
//--- Function: create the string of the time of this
//--- Return: the right format-time-string
//--- Parameters:
//--- Create time: 2002-07-30 Change time: 2002-07-30
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_FormatTime(){
var tmpOut="A.D."+this.FTime.getFullYear()+" "+this.FMonthNames[this.FTime.getMonth()]+" "+this.FTime.getDate()
+" "+this.FWeekDayNames[this.FTime.getDay()]
return tmpOut;
}
//***********************************************************************************************************************
//--- Function:
//--- Return:
//--- Parameters:
//--- Create time: 2002-07-30 Change time: 2002-07-30
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_MainCalender(){
var tmpOut="";
//-- the day of week
var currentDay;
//-- 1 should change,-1 should not change
var isChangeRow=1;
//-- make the title of the maintable
tmpOut+="<tr>"
for (var i=0;i<this.FWeekDayNames.length;i++){
tmpOut+="<td style='width:50' align=center><font style='font-size:9pt;Color:White'>"+this.FWeekDayNames[i]+"</font></td>";
}
tmpOut+="</tr>";
//-- make the body of the maintable
currentDay=(new Date(""+this.FTime.getFullYear(),""+this.FTime.getMonth(),1)).getDay();

if (0!=currentDay && 1==isChangeRow){
tmpOut+="<tr>";
isChangeRow=-1*isChangeRow;
}
for (var i=0;i<currentDay;i++){
tmpOut+="<td bgcolor='#f3f076'> </td>";
}

for (var i=1;i<=this.FMonthArray[this.FTime.getMonth()];i++){
if (0==currentDay){
tmpOut+="<tr>";
}

if (i==this.FTime.getDate()){
tmpOut+="<td align='center'><span style='width:100%;cursor:hand;background-color=#FF8040' title='click to change date' id='span"
+i+"' onclick='xg_span_onclick("+i+")' ondblclick='xg_span_ondbclick("+i+")'><FONT STYLE='font-size:9pt;Color:#ffffff'>"+i+"</font></span></td>";
} else{
tmpOut+="<td align='center'><span style='width:100%;cursor:hand;background-color=#ffffff' title='click to change date' id='span"
+i+"' onclick='xg_span_onclick("+i
+")' ondblclick='xg_span_ondbclick("+i+")'><FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066'>"+i+"</font></td>"
}

if (0==currentDay){
currentDay=1;
} else if (6==currentDay){
tmpOut+="</tr>";
currentDay=0;
} else{
currentDay++;
}
}

if (0!=currentDay){
for (var i=0;i<7-currentDay;i++){
tmpOut+="<td><span style='width:100%;background-color=#f3f076'> </td>";
}
tmpOut+="</tr>";
}

return tmpOut;
}
//***********************************************************************************************************************
//--- Function: create the current time-string by the especial format
//--- Return: the right time-string be formated
//--- Parameters:
//--- Create time: 2002-07-31 Change time: 2002-07-31
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_GetCurrentTime(AType){
var tmpOut="";
//-- get current time
var now=new Date();
var hours=now.getHours();
var minutes=now.getMinutes();
var seconds=now.getSeconds();
//-- make the vision time
if (0==AType){ //-- example: A.D.2002 August 1 10:40:29 a.m.
tmpOut ="A.D."+now.getFullYear();
tmpOut+=" "+xgCalender.FMonthNames[now.getMonth()];
tmpOut+=" "+now.getDate();
tmpOut+=" "+((hours >12)?hours -12:hours);
tmpOut+=((minutes < 10) ? ":0" : ":") + minutes;
tmpOut+=((seconds < 10) ? ":0" : ":") + seconds;
tmpOut+=(hours >= 12) ? " p.m. " : " a.m. ";
} else if(1==AType){//-- A.D.2002 August 1 20:41:56 p.m.
tmpOut ="A.D."+now.getFullYear();
tmpOut+=" "+xgCalender.FMonthNames[now.getMonth()];
tmpOut+=" "+now.getDate();
tmpOut+=" "+hours;
tmpOut+=((minutes < 10) ? ":0" : ":") + minutes;
tmpOut+=((seconds < 10) ? ":0" : ":") + seconds;
tmpOut+=(hours >= 12) ? " p.m. " : " a.m. ";
} else{
tmpOut+="error";
}
span_current.innerText=tmpOut;
//-- set the refresh time
timerID = setTimeout("xg_GetCurrentTime(1)",1000);
}

JavaCoffee 2002-08-02

打赏
举报

<input type="button" value="日期选择" name="selectdate" onclick="window.open('selectdate.htm')">

"selectdate.htm"页面如下：
<HTML><HEAD><TITLE>日期选择</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<META content="Microsoft FrontPage 4.0" name=GENERATOR>
<script language="javascript">
function dtvalue()
{
var dt,dtStr;
dt=new Date(document.all.dt.Value);
dtStr=dt.toLocaleString();
alert(dtStr);
}
function frmsubmit()
{
var dt,dtStr;
dt=new Date(document.all.dt.Value);
dtStr=dt.toLocaleString();
document.frmtest.action="test.asp?dtvalue=" + dtStr;
document.frmtest.submit();
}
</script>
</HEAD>
<BODY bgColor=#ffffff leftMargin=0 onload="" topMargin=0>
<form method="POST" action="你要提交的页面" name="frmtest">
<object classid="clsid:20DD1B9E-87C4-11D1-8BE3-0000F8754DA1" id="dt" width="107" height="20" onchange="alert(this.value);">
<param name="_ExtentX" value="2831">
<param name="_ExtentY" value="529">
<param name="_Version" value="393216">
<param name="MousePointer" value="0">
<param name="Enabled" value="1">
<param name="OLEDropMode" value="0">
<param name="CalendarBackColor" value="-2147483643">
<param name="CalendarForeColor" value="-2147483630">
<param name="CalendarTitleBackColor" value="-2147483633">
<param name="CalendarTitleForeColor" value="-2147483630">
<param name="CalendarTrailingForeColor" value="-2147483631">
<param name="CheckBox" value="0">
<param name="CustomFormat" value>
<param name="DateIsNull" value="0">
<param name="Format" value="662831105">
<param name="UpDown" value="0">
<param name="CurrentDate" value="37470">
<param name="MaxDate" value="40543">
<param name="MinDate" value="36526">
</object>
<hr>
<p>
<input type="button" value="查看选择的日期" name="B3" onclick="dtvalue()">
<input type="button" value="提交选择的日期" name="B4" onclick="frmsubmit()"></p>
</form>
</BODY></HTML>