eleement ui日期选择器年先默认今年 web日期选择器

转载

mob64ca141275de 2024-02-23 20:03:58

文章标签 ASP Web 应用服务器 JavaScript 数据结构 文章分类 机器学习人工智能

在WEB结构程序开发中，日期数据在表单中输入可以采用很多种方法，常见的有：
　　1、在文本框中让用户按规定好的日期格式直接输入。这种方法最简单，可是用户使用起来很麻烦，而且程序员还要在后台对输入的日期进行数据验证，所以显得很笨拙；
　　2、用下拉列表列出年份、月份、天数由用户选择输入。这种方法更麻烦，用户操作看似比上一种方便了，可是每一个日期输入都需要程序员在后台对年份、月份、天数一一循环列出，而且在列出前或用户输入后还是要对日期信息进行验证，所以这种方法也不可取；
　　3、用ActiveX日历控件，在前台输入。这种方法很方便，可是唯一缺点也是最致命的一个弱点：需要每个客户端都要装有ActiveX控件。

　　最近，笔者用ASP结合JavaScript，开发了这样一个模仿控件式的日期选择器。用户操作更直观、更方便；程序后台实现时可以在每次需要时很方便的调用，而不需要客户端安装任何程序。

　　在此，将源代码贡献出来与大家一起分享。

[原理]

　　使用页面通过打开定制窗口调用日期选择程序，并将使用页面内的FormName,FiledName元素属性传给日期选择程序。在日期选择程序中，用ASP在后台计算并显示出日历，用户选择后，将日期值再传回使用页面的Filed.value,最后自动关闭弹出窗口完成选择。

[源程序]

　1、sample.htm(使用页面)
2、calendar.asp (日期选择器程序)

1、sample.htm

======================================================== 

<html> 

<head> 

<title>Calendar Sample</title> 

</head> 

<body> 

<form method="POST" action="sample.htm" name="sample"> 

<b><font face="Arial">Sample</font></b><p> 

<font face="Arial"><span style="font-size: 9pt; font-weight: 


700">Date: </span> 

</font><input type="text" name="date" size="10" readonly> 

<a href="#SelectDate" 


onClick="JavaScript:window.open('calendar.asp?form=sample&field=date' 


,'','directorys=no,toolbar=no,status=no,menubar=no,scrollbars=no,resi 


zable=no,width=190,height=140');"> 

<img border="0" src="images/date_picker.gif" width="24" 


height="16"></a></p> 

<p><input type="submit" value="submit" name="B1"></p> 

</form> 

</body> 

</html> 

===========================================================

2、calendar.asp

=========================================================== 

<% 

'WEB Calendar 

'By Chaiwei 2002-7-31 

'-------------------------------- 


'月份名称定义 

Dim Month_Name(12) 

Month_Name(1) = "January" 

Month_Name(2) = "February" 

Month_Name(3) = "March" 

Month_Name(4) = "April" 

Month_Name(5) = "May" 

Month_Name(6) = "June" 

Month_Name(7) = "July" 

Month_Name(8) = "August" 

Month_Name(9) = "September" 

Month_Name(10) = "October" 

Month_Name(11) = "November" 

Month_Name(12) = "December" 


'年份处理,默认值为服务器当前年份 

if request.querystring("year")<>"" then 

Year_var=cint(request.querystring("year")) 

else 

Year_var=year(date()) 

end if 


'上一年、下一年赋值 

Previous_year=Year_var-1 

Next_year=Year_var+1 



'月份处理,默认值为服务器当前月份 

if request.querystring("Month")<>"" then 

Month_var=cint(request.querystring("Month")) 

else 

Month_var=month(date()) 

end if 


'上一月、下一月赋值 

if Month_var<=1 then 

Next_month=Month_var+1 

Previous_month=1 

else 

if Month_var>=12 then 

Next_month=12 

Previous_month=Month_var-1 

else 

Next_month=Month_var+1 

Previous_month=Month_var-1 

end if 

end if 


'当前天数定位计算 

First_day=DateSerial(Year_var,Month_var,1) 

Current_day=First_day-weekday(First_day)+2 


%> 

<html> 

<head> 

<title>Calendar</title> 

<Script Language="JavaScript"> 


//前端日期选择函数 


function pick(v) { 



window.opener.document.<%=request.querystring("form")%>.<%=request.qu 


erystring("field")%>.value=v; 

window.close(); 

return false; 

} 

</Script> 

<style> 

<!-- 

.page{ text-decoration: none; color: #CAE3FF; font-size:9pt; 


font-family:Webdings } 

.dayTable{ border: 1px dotted #E6E6E6; padding-left: 4; 


padding-right: 4; padding-top: 1; padding-bottom: 1} 

.day{ font-family: Arial; font-size: 9pt; text-decoration: 


underline; color: #000000 } 

:hover.day{ font-family: Arial; font-size: 9pt; text-decoration: 


none; color: #FF0000 } 

.title{ font-family: Arial; font-size: 9pt; color: #FFFFFF; 


font-weight: bold } 

:hover.page{ text-decoration: underline; color: #FFFFFF; 


font-family:Webdings; font-size:9pt } 

--> 

</style> 

</head> 

<body topmargin="0" leftmargin="0" onLoad="window.focus();"> 

<div align="center"> 

<center> 

<table border="0" cellspacing="0" style="border-collapse: collapse" 


width="100%" id="AutoNumber1" cellpadding="0"> 

<tr> 

<td width="100%" bgcolor="#003063"> 

<% 

'日历表头显示 

%> 

<div align="center"> 

<center> 

<table border="0" cellspacing="0" style="border-collapse: 


collapse" width="100%" id="AutoNumber3" cellpadding="2"> 

<tr> 

<td width="20%" align="center"> 

<a 


href="calendar.asp?year=<%=Previous_year%>&month=<%=Month_var%>&form= 


<%=request.querystring("form")%>&field=<%=request.querystring("field" 


)%>" title="Previous Year" class="page">7</a> 

<a 


href="calendar.asp?year=<%=Year_var%>&month=<%=Previous_month%>&form= 


<%=request.querystring("form")%>&field=<%=request.querystring("field" 


)%>" title="Previous Month" class="page">3</a></td> 

<td width="60%" align="center" 


class="title"><%response.write Month_Name(Month_var) & "　" & 


Year_var%></td> 

<td width="20%" align="center"> 

<a 


href="calendar.asp?year=<%=Year_var%>&month=<%=Next_month%>&form=<%=r 


equest.querystring("form")%>&field=<%=request.querystring("field")%>" 


title="Next Month" class="page">4</a> 

<a 


href="calendar.asp?year=<%=Next_year%>&month=<%=Month_var%>&form=<%=r 


equest.querystring("form")%>&field=<%=request.querystring("field")%>" 


title="Next Year" class="page">8</a></td> 

</tr> 

</table> 

</center> 

</div> 

</td> 

</tr> 

<tr> 

<td width="100%"> 

<div align="center"> 

<center> 

<table border="0" cellspacing="0" style="border-collapse: 


collapse" width="100%" id="AutoNumber2" cellpadding="3"> 

<tr> 

<td align="center" bgcolor="#31659C" 


class="title">Mon</td> 

<td align="center" bgcolor="#31659C" 


class="title">Tur</td> 

<td align="center" bgcolor="#31659C" 


class="title">Wed</td> 

<td align="center" bgcolor="#31659C" 


class="title">Thu</td> 

<td align="center" bgcolor="#31659C" 


class="title">Fri</td> 

<td align="center" bgcolor="#31659C" 


class="title">Sat</td> 

<td align="center" bgcolor="#31659C" 


class="title">Sun</td> 

</tr> 

<% 

'日历内容 5行*7例 显示 

'外层循环显示控制行 


for i=0 to 4 

%> 

<tr> 

<% 

'内层循环显示控制列 


for j=0 to 6 

response.write "<td align='center' 


class='dayTable'" 


'天数显示，“今天”显示 


if Current_day = date then 

response.write " bgcolor='#FFFFE0'>" 

%><a 


href="javascript:pick('<%=Current_day%>');" title="Today" 


class="day"><b><%=day(Current_day)%></b></a><% 

else 


'天数显示，非本月天数显示 


if Month(Current_day) <> Month_var 


then 

response.write " 


bgcolor='#F0F0F0'>" 

%> 

<a 


href="javascript:pick('<%=Current_day%>');" title="<%=Current_day%>" 


class="day"><font color="#CCCCCC"><%=day(Current_day)%></font></a><% 

else 


'天数显示，本月天数显示 

response.write ">" 

%> 

<a 


href="javascript:pick('<%=Current_day%>');" title="<%=Current_day%>" 


class="day"><%=day(Current_day)%></a><% 

end if 


end if 


'天数累加推算 


Current_day = Current_day + 1 

response.write "</td>" 

next 

%> 

</tr> 

<% 

next 

%> 

</table> 

</center> 

</div> 

</td> 

</tr> 

</table> 

</center> 

</div> 

</body> 

</html> 

===========================================================

[后记]

　　其实这个日期选择器通用性很大，稍加改动还可以在其它应用中发挥更多效力。比如，在开发日程安排的程序时，将其放在内嵌框架里，让用户在同一页面不刷新的情况下方便选择，安排事务更是方便有效。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。