风声日期时间选择器的一些小小的使用心得

风声作品日期时间选择器非常好用，但在使用过程中发现一些小问题。

原作品地址为：http://www.fonshen.com/dispbbs.asp?boardID=2&ID=1&page=1

在此再帖一下：

test.html内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>风声日期和时间选择器</title>

</head>

<body>

<pre>

/*/

函数说明：风声日期和时间选择器，整个功能只有一个函数调用极其方便

功能说明：年份根据输入（当前）日期前后5年自动选择，1000--9000年设定

作　　者：风声

电子邮件：rumor@17560.net

函数原型：

function selectTime(thisIdName[,mode])

参数说明：

thisIdName：接受返回值的对象ID名称

mode：返回值类型

0：默认值，返回yyyy-mm-dd hh-mm-ss

1：返回yyyy-mm-dd

2：返回hh-mm-ss

3：返回mm-dd

4：返回hh-mm

5：返回yyyy-mm-dd hh-mm

修正时间：2005-11-29

时　　间：2004-5-26

</pre>

<br>

</body>

</html>

selectTime.js内容如下：

/**//*/

函数说明：风声日期和时间选择器，整个功能只有一个函数调用极其方便

作　　者：风声

电子邮件：rumor@17560.net

函数原型：

function selectTime(thisIdName[,mode])

参数说明：

thisIdName：接受返回值的对象ID名称

mode：返回值类型

0：默认值，返回yyyy-mm-dd hh-mm-ss

1：返回yyyy-mm-dd

2：返回hh-mm-ss

3：返回mm-dd

4：返回hh-mm

5：返回yyyy-mm-dd hh-mm

修正时间：2005-11-29

时　　间：2004-5-26

function timeFormat(i)...{return((i<10)?"0"+i.toString():i.toString());}

function selectTime(thisName)...{

var argv=selectTime.arguments;

var argc=selectTime.arguments.length;

var mode=(argc>1)?argv[1]:0;

try...{

var strTime=document.getElementById(thisName).value;

strTime=strTime.replace(/[-:]/g," ");

}catch(e)...{

return false;

}

var dateNow = new Date();

var intYear = dateNow.getYear();

var intMonth = dateNow.getMonth();

var intDate = dateNow.getDate();

var intHour = dateNow.getHours();

var intMinute = dateNow.getMinutes();

var intSecond = dateNow.getSeconds();

switch(mode)...{

case 0:break;

case 1:break;

case 2:strTime=intYear+" "+(intMonth+1)+" "+intDay+" "+strTime;break;

case 3:strTime=intYear+" "+strTime;break;

case 4:strTime=intYear+" "+(intMonth+1)+" "+intDay+" "+strTime;break;

case 5:break;

}

var arrTime=strTime.split(" ");

var i=0;

//----年

if(!isNaN(arrTime[0]))...{

i=parseInt(arrTime[0],10);

if(i>1000&&i<9000)intYear=i;

}

//----月

if(!isNaN(arrTime[1]))...{

i=parseInt(arrTime[1],10);

if(i>0&&i<13)intMonth=i-1;

}

//----日历开始

var dateFirst=new Date(intYear,intMonth,1);

var intDay=dateFirst.getDay();

//----日历结束

var arrDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);

arrDays[1]+=!(intYear%4);

var intDays=arrDays[intMonth];

//----日

if(!isNaN(arrTime[2]))...{

i=parseInt(arrTime[2],10);

if(i>0&&i<=intDays)intDate=i;

}

//----时

if(!isNaN(arrTime[3]))...{

i=parseInt(arrTime[3],10);

if(i>=0&&i<24)intHour=i;

}

//----分

if(!isNaN(arrTime[4]))...{

i=parseInt(arrTime[4],10);

if(i>=0&&i<60)intMinute=i;

}

//----秒

if(!isNaN(arrTime[5]))...{

i=parseInt(arrTime[5],10);

if(i>=0&&i<60)intSecond=i;

}

var myWindow = window.open("","selectTime","height=304,width=404");

var arrMonth=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");

var strHTML="";

strHTML+="<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312">";

strHTML+="<title>选择日期和时间</title><style type="text/css"><!-- ";

strHTML+="table {font-size: 12px;}";

strHTML+=".f8 { font-size: 7px;}";

strHTML+=".myinput {text-align: center;width: 20px;border: 0px;height: 16px;vertical-align: baseline;}";

strHTML+=".boxIn {border-top: 2px solid #423E3B;border-right: 1px solid #FFFCF5;border-bottom: 1px solid #FFFCF5;border-left: 2px solid #423E3B;background: #FFFFFF;}";

strHTML+=".myButton {height: 10px;width: 25px;font-size: 4px;}";

strHTML+=" --></style>";

strHTML+="<script language="JavaScript">";

//----函数

strHTML+="var day="+intDate+";";

strHTML+="var strTemp="",intTemp=0;";

strHTML+="function onTimeKeyUp(obj,num,maxnum,next){";

strHTML+="var strTemp=obj.value;";

strHTML+="if(isNaN(strTemp))obj.value=strTemp.substring(0,strTemp.length-1);";

strHTML+="else{var intTemp=parseInt(strTemp,10);";

strHTML+="if(intTemp>maxnum)obj.value=strTemp.substring(0,strTemp.length-1);";

strHTML+="else if(intTemp>num){next.focus();}";

strHTML+="}}";

strHTML+="function setCalendar(intYear,intMonth,intDate){";

strHTML+="var dateFirst=new Date(intYear,intMonth,1);";

strHTML+="var intDay=dateFirst.getDay();";

strHTML+="var arrDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);";

strHTML+="arrDays[1]+=!(intYear%4);";

strHTML+="var intDays=arrDays[intMonth],str="";";

strHTML+="if(intDate>intDays)intDate=intDays;";

strHTML+="intDay--;";

strHTML+="for(var i=0;i<42;i++){";

strHTML+="if(i<=intDay)date[i].innerHTML="";";

strHTML+="else if(i<=intDays+intDay){str=i-intDay;if(str<10)str=" "+str;";

strHTML+="if(i-intDay==intDate){strTemp=str;";

strHTML+="str="<font color='#FFFFFF' style='background:#0A246A'>"+str+"</font>";";

strHTML+="intTemp=i;day=intDate;}";

strHTML+="date[i].innerHTML=str;}";

strHTML+="else date[i].innerHTML="";";

strHTML+="}}";

strHTML+="function setNewDate(num){"

strHTML+="var str=date[num].innerHTML;";

strHTML+="var i=str.length;";

strHTML+="if(i>1&&i<8){";

strHTML+="date[intTemp].innerHTML=strTemp;intTemp=num;strTemp=str;";

strHTML+="date[num].innerHTML="<font color='#FFFFFF' style='background:#0A246A'>"+strTemp+"</font>";";

strHTML+="if(i>2)str=str.substr(i-1);day=parseInt(str,10);}}";

strHTML+="function isOk(){";

switch(mode)...{

case 0:strHTML+="window.opener.document.getElementById(""+thisName+"").value=year.value+"-"+(parseInt(month.value,10)+1)+"-"+day+" "+hour.value+":"+minute.value+":"+second.value;";break;

case 1:strHTML+="window.opener.document.getElementById(""+thisName+"").value=year.value+"-"+(parseInt(month.value,10)+1)+"-"+day;";break;

case 2:strHTML+="window.opener.document.getElementById(""+thisName+"").value=hour.value+":"+minute.value+":"+second.value;";break;

case 3:strHTML+="window.opener.document.getElementById(""+thisName+"").value=(parseInt(month.value,10)+1)+"-"+day;";break;

case 4:strHTML+="window.opener.document.getElementById(""+thisName+"").value=hour.value+":"+minute.value;";break;

case 5:strHTML+="window.opener.document.getElementById(""+thisName+"").value=year.value+"-"+(parseInt(month.value,10)+1)+"-"+day+" "+hour.value+":"+minute.value;";break;

}

strHTML+="window.close();}";

strHTML+="function timeFormat(i){return((i<10)?'0'+i.toString():i.toString());}";

strHTML+="function timeAdd(obj0){var i=parseInt(obj.value,10);obj.value=timeFormat((i<intMax)?i+1:0);obj.select();obj0.focus();}";

strHTML+="function timeRid(obj0){var i=parseInt(obj.value,10);obj.value=timeFormat((i>0)?i-1:intMax);obj.select();obj0.focus();}";

strHTML+="</script>";

strHTML+="</head>";

strHTML+="<body bgcolor="#D4CFC9" style="border:0;margin:5" οncοntextmenu="return(false)">";

strHTML+="<table width="394" border="0" align="center" cellpadding="0" cellspacing="0">";

strHTML+="<tr>";

strHTML+="<td height="24" align="center" style="border-left:1px solid #FFFCF5;border-top:1px solid #FFFCF5">日期和时间</td>";

strHTML+="<td colspan="2" style="border-left:2px solid #423E3B;border-bottom:1px solid #FFFCF5"> </td>";

strHTML+="</tr><tr> ";

strHTML+="<td height="200" colspan="2" align="center" style="border-left:1px solid #FFFCF5;margin:5px;">";

strHTML+="<fieldset style="width:190;height:190"><legend>日期(D)</legend>";

strHTML+="<select name="month" id="month" style="width:82" onChange="setCalendar(year.value,month.value,day)">";

//----月

for(i=0;i<12;i++)...{

strHTML+="<option value=""+i+""";

if(i==intMonth)strHTML+=" selected";

strHTML+=">"+arrMonth[i]+"</option>";

}

strHTML+="</select> ";

strHTML+="<select name="year" id="year" style="width:82" onChange="setCalendar(year.value,month.value,day)">";

//----年

for(i=intYear-5;i<intYear+5;i++)...{

strHTML+="<option value=""+i+""";

if(i==intYear)strHTML+=" selected";

strHTML+=">"+i+"年</option>";

}

strHTML+="</select>";

strHTML+="<div class="f8"> </div>";

strHTML+="<table width="168" height="133" border="0" cellpadding="2" cellspacing="0" class="boxIn" style="cursor:default">";

strHTML+="<tr align="center" bgcolor="#999999">";

strHTML+="<td width=24 height=19>日</td><td width=24>一</td><td width=24>二</td><td width=24>三</td><td width=24>四</td><td width=24>五</td><td width=24>六</td>";

//----日

for(i=0;i<42;i++)...{

if(i%7==0)strHTML+="</tr><tr align="center">";

strHTML+="<td id="date" height=19 οnclick="setNewDate("+i+")"> </td>";

}

strHTML+="</tr></table></fieldset></td>";

strHTML+="<td align="center" style="border-right:2px solid #423E3B;margin:5px;">";

strHTML+="<fieldset style="width:170;height:190"><legend>时间(T)</legend>";

strHTML+="<div style="height:142"> </div>";

strHTML+="<table width="150" border="0" cellspacing="2" cellpadding="0"><tr>";

strHTML+="<td width="125" align="right" class="boxIn">";

//----时

strHTML+="<input name="hour" type="text" class="myinput" id="hour" onBlur="if(this.value=='')this.value='00';" onFocus="this.select();obj=this;intMax=23" value=""+timeFormat(intHour)+"" maxlength="2" οnkeyup="onTimeKeyUp(this,2,23,minute)">:";

//----分

strHTML+="<input name="minute" type="text" class="myinput" id="minute" onBlur="if(this.value=='')this.value='00';" onFocus="this.select();obj=this;intMax=59" value=""+timeFormat(intMinute)+"" maxlength="2" οnkeyup="onTimeKeyUp(this,5,59,second)">:";

//----秒

strHTML+="<input name="second" type="text" class="myinput" id="second" onBlur="if(this.value=='')this.value='00';" onFocus="this.select();obj=this;intMax=59" value=""+timeFormat(intSecond)+"" maxlength="2" οnkeyup="onTimeKeyUp(this,59,59,null)">";

strHTML+="</td>";

strHTML+="<td width="25"><input name="Submit" type="button" class="myButton" value="◆" onClick="timeAdd(this)">";

strHTML+="<input name="Submit4" type="button" class="myButton" value="◆" onClick="timeRid(this)"></td>";

strHTML+="</tr></table></fieldset></td>";

strHTML+="</tr><tr> ";

strHTML+="<td height="40" colspan="3" style="border-left:1px solid #FFFCF5;border-right:2px solid #423E3B;border-bottom:2px solid #423E3B;margin:5px;">";

strHTML+="　Rumor Date And Time Selector<br><br>";

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

strHTML+="<td width="80" height="8"></td>";

strHTML+="<td width="127" align="right"></td>";

strHTML+="<td width="187" align="right"></td>";

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

strHTML+="<td colspan="2" align="right">";

strHTML+="<input type="button" name="Submit1" value="　确定　" οnclick="isOk()"> ";

strHTML+="<input type="button" name="Submit2" value="　取消　" οnclick="window.close()"> ";

strHTML+="<input type="button" name="Submit3" value="　应用　" disabled></td>";

strHTML+="</tr></table></body></html>";

strHTML+="<script language="javascript">var obj=document.getElementById("hour"),intMax=23;";

strHTML+="setCalendar("+intYear+","+intMonth+","+intDate+");</script>";

myWindow.document.write(strHTML);

myWindow.document.close();

}

以上代码在任何一个.html的页面中执行都很正常，但是当你将代码放到.aspx的文件中运行后，却总是报javascript错误，着实让我郁闷了一下午。后经反复实验及高人提醒，才明白需要对selectTime.js文件做编码转换才能在.aspx的页面中使用。编码转换方法为：在visual studio 2003中打开selectTime.js文件，选择“文件”-》“另存为”-》点保存旁边的小三角，选择“编码保存”，在弹出的提示框中选择编码类型，注意一定要选择“Unicode- 代码页 1200”，其他编码方式都不能解决此问题。

这样问题就解决啦。

风声日期时间选择器的一些小小的使用心得相关推荐

微信小程序----日期时间选择器（自定义精确到分秒或时段）
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bind ...
Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案
官方文档 https://element.eleme.cn/#/zh-CN/component/datetime-picker 问题分析 el-date-picker组件需要 :picker-opti ...
Android中实现日期时间选择器(DatePicker和TimePicker)
利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...
DateTimePicker 日期时间选择器报错 Cannot read property ‘getHours‘ of undefined, 无法选中`[__ob_: observer__]`时做判断
我在一次开发中遇到了这个情况:使用DateTimePicker 日期时间选择器,出现无法选中, 报错 Cannot read property 'getHours' of undefined, 这个原 ...
php中日期选择代码,实现JS日期时间选择器
这次给大家带来实现JS日期时间选择器,实现JS日期时间选择器的注意事项有哪些,下面就是实战案例,一起来看一下. flatpickr 是一个轻量级.注重精益.由 UX 驱动和可扩展的 JavaScrip ...
flatpickr功能强大的日期时间选择器插件
flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...
bootstrap，datetimepicker日期时间选择器-限制时间段，以及中文显示问题
基于bootstrap的css,js bootstrap-datetimepicker的css,js <script src="jquery-1.11.1.min.js"&g ...
日期时间选择器 DateTimePicker 1127
日期时间选择器 DateTimePicker 控件引入效果属性
datetimepicker 默认时间_Django项目中如何使用日期时间选择器DateTimePicker
如果你的模型中含有datetime类型的字段,表单中需要用户输入日期和时间,那么你如何保证不同用户输入的时间都遵循一定的格式(DD/MM/YYYY 或者YYYY-MM-DD)是个必须要考虑的问题.一个 ...
web元件库、axure元件库、通用元件库、常用web组件、常用表单、框架、数据表单、导航栏、边框、图标、列表、日期时间选择器、评分组件、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、时间轴
web元件库.axure元件库.通用元件库.常用web组件.常用表单.框架.数据表单.导航栏.边框.图标.列表.日期时间选择器.评分组件.穿梭框.输入框.步骤条.图表组件.数据可视化.后台模板.时间轴 ...

风声日期时间选择器的一些小小的使用心得

风声日期时间选择器的一些小小的使用心得相关推荐

最新文章

热门文章