不需要看js 和css 。只需要修改下面就可以了:
<input id="selectdate" type="text" style="border:1px solid #999" onClick="fPopCalendar(event,this,this)" onFocus="this.select()" />
把上面的修改为:
<input id="selectdate" type="text" style="border:1px solid #999" onFocus="this.select()" />
<input type="button" value="日期选择" onClick="fPopCalendar(event,document.getElementById('selectdate'),document.getElementById('selectdate'))"
就是在文本框后面加一个按钮,然后把文本框的点击事件放到按钮上来。
需要注意的是点击事件onClick="fPopCalendar(event,this,this)"里面的两个this,第一个this你可以不修改,它只是计算位置的,我把这两个this都换成了document.getElementById('selectdate'),单引号里是日期框的id值。这样修改后一个页面里每个日期输入框的id必须是唯一的,例如两个日期框是这样:
<input id="selectdate" type="text" style="border:1px solid #999" onFocus="this.select()" />
<input type="button" value="日期选择" onClick="fPopCalendar(event,document.getElementById('selectdate'),document.getElementById('selectdate'))"
<input id="selectdate2" type="text" style="border:1px solid #999" onFocus="this.select()" />
<input type="button" value="日期选择" onClick="fPopCalendar(event,document.getElementById('selectdate2'),document.getElementById('selectdate2'))"
再说一句,按钮太丑了,换个图片多好,我们项目是这样的
直接保存成 asp文件 运行就可以<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<link href="http://purl.org/dc" rel="schema.DC" />
<title>日历</title
</head>
<body bgcolor="#FFFFFF">
<%
' 要调用的函数声明
'根据年份及月份得到每月的总天数
Function GetDaysInMonth(iMonth, iYear)
Select Case iMonth
Case 1, 3, 5, 7, 8, 10, 12
GetDaysInMonth = 31
Case 4, 6, 9, 11
GetDaysInMonth = 30
Case 2
If IsDate("February 29, " &iYear) Then
GetDaysInMonth = 29
Else
GetDaysInMonth = 28
End If
End Select
End Function
'得到一个月开始的日期.
Function GetWeekdayMonthStartsOn(dAnyDayInTheMonth)
Dim dTemp
dTemp = DateAdd("d", -(Day(dAnyDayInTheMonth) - 1), dAnyDayInTheMonth)
GetWeekdayMonthStartsOn = WeekDay(dTemp)
End Function
'得到当前一个月的上一个月.
Function SubtractOneMonth(dDate)
SubtractOneMonth = DateAdd("m", -1, dDate)
End Function
'得到当前一个月的下一个月.
Function AddOneMonth(dDate)
AddOneMonth = DateAdd("m", 1, dDate)
End Function
' 函数声明结束
Dim dDate ' 日历显示的日期
Dim iDOW ' 每一月开始的日期
Dim iCurrent ' 当前日期
Dim iPosition ' 表格中的当前位置
' 得到选择的日期并检查日期的合法性
If IsDate(Request.QueryString("date")) Then
dDate = CDate(Request.QueryString("date"))
Else
If IsDate(Request.QueryString("month") &"-" &Request.QueryString("day") &"-" &Request.QueryString("year")) Then
dDate = CDate(Request.QueryString("month") &"-" &Request.QueryString("day") &"-" &Request.QueryString("year"))
Else
dDate = Date()
If Len(Request.QueryString("month")) <>0 Or Len(Request.QueryString("day")) <>0 Or Len(Request.QueryString("year")) <>0 Or Len(Request.QueryString("date")) <>0 Then
Response.Write "您所选择的日期格式不正确,系统会使用当前日期.<BR><BR>"
End If
End If
End If
'得到日期后我们先得到这个月的天数及这个月的起始日期.
iDIM = GetDaysInMonth(Month(dDate), Year(dDate))
iDOW = GetWeekdayMonthStartsOn(dDate)
%>
<table width="180" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="5"></td>
</tr>
</table>
<table width="180" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" colspan="7"><table border="0" cellpadding="0" cellspacing="0"width="100%">
<tr>
<td height="22" align="right"><a href="rl.asp?date=<%= SubtractOneMonth(dDate) %>"><img src="../images/dot_left.gif" width="15" height="14" border="0" /></a></td>
<td align="center"><font color="999999"><b><%= MonthName(Month(dDate)) &" " &Year(dDate) %></b></font></td>
<td><a href="rl.asp?date=<%= AddOneMonth(dDate) %>"><img src="../images/dot_right.gif" width="15" height="14" border="0" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td width="25" height="22" align="center"><font
color="d08c00"><b>日</b></font></td>
<td width="25" align="center"><b><font color="999999">一</font></b></td>
<td width="25" align="center"><b><font color="999999">二</font></b></td>
<td width="25" align="center"><b><font color="999999">三</font></b></td>
<td width="25" align="center"><b><font color="999999">四</font></b></td>
<td width="25" align="center"><b><font color="999999">五</font></b></td>
<td width="25" align="center"><b><font color="d08c00">六</font></b></td>
</tr>
<%
' 如果这个月的起始日期不是周日的话就加空的单元.
If iDOW <>1 Then
Response.Write vbTab &"<TR>" &vbCrLf
iPosition = 1
Do While iPosition <iDOW
Response.Write vbTab &vbTab &"<TD> </TD>" &vbCrLf
iPosition = iPosition + 1
Loop
End If
' 绘制这个月的日历
iCurrent = 1
iPosition = iDOW
Do While iCurrent <= iDIM
' 如果是一行的开头就使用 TR 标记
If iPosition = 1 Then
Response.Write vbTab &"<TR>" &vbCrLf
End If
' 如果这一天是我们选择的日期就高亮度显示该日期.
If iCurrent = Day(dDate) Then
Response.Write vbTab &vbTab &"<TD BGCOLOR=#eeeeee height=18 align=center><B>" &iCurrent &"</B></TD>" &vbCrLf
Else
Response.Write vbTab &vbTab &"<TD height=18 align=center><A HREF=""./rl.asp?date=" &Month(dDate) &"-" &iCurrent &"-" &Year(dDate) &""">" &iCurrent &"</A></TD>" &vbCrLf
End If
' 如果满一周的话表格就另起一行
If iPosition = 7 Then
Response.Write vbTab &"</TR>" &vbCrLf
iPosition = 0
End If
iCurrent = iCurrent + 1
iPosition = iPosition + 1
Loop
' 如果一个月不是以周六结束则加上相应的空单元.
If iPosition <>1 Then
Do While iPosition <= 7
Response.Write vbTab &vbTab &"<TD> </TD>" &vbCrLf
iPosition = iPosition + 1
Loop
Response.Write vbTab &"</TR>" &vbCrLf
End If
%>
</table>
<table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="5"></td>
</tr>
</table></td>
</tr>
</table>
我给你啊 。。。。。。。。。。~~~~~~~~~~~function UncCalendar (sName, sDate)
{
/////////////////////////////////////////////////////////////////////////
//定义UncCalendar对象的属性并赋默认值。
//inputValue属性的值为"today"时表示(客户机)当前日期。
//直接在这里把默认值修改成你想要的,使用时你就什么也不用设置了。
this.inputName = sName || "uncDate"
this.inputValue = sDate || ""
this.inputSize = 10
this.inputClass = ""
this.color = "#333333"
this.bgColor = "#EEEEEE"
this.buttonWidth = 60
this.buttonWords = "选择日期"
this.canEdits = true
this.hidesSelects = true
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
//定义display方法。
this.display = function ()
{
var reDate = /^(19[7-9]\d|20[0-5]\d)\-(0?\d|1[0-2])\-([0-2]?\d|3[01])$/
if (reDate.test(this.inputValue))
{
var dates = this.inputValue.split("-")
var year = parseInt(dates[0], 10)
var month = parseInt(dates[1], 10)
var mday = parseInt(dates[2], 10)
}
else
{
var today = new Date()
var year = today.getFullYear()
var month = today.getMonth()+1
var mday = today.getDate()
}
if (this.inputValue == "today")
inputValue = year + "-" + month + "-" + mday
else
inputValue = this.inputValue
var lastDay = new Date(year, month, 0)
lastDay = lastDay.getDate()
var firstDay = new Date(year, month-1, 1)
firstDay = firstDay.getDay()
var btnBorder =
"border-left:1px solid " + this.color + "" +
"border-right:1px solid " + this.color + "" +
"border-top:1px solid " + this.color + "" +
"border-bottom:1px solid " + this.color + ""
var btnStyle =
"padding-top:3pxcursor:defaultwidth:" + this.buttonWidth + "pxtext-align:centerheight:18pxtop:-9px" +
"font:normal 12px 宋体position:absolutez-index:99background-color:" + this.bgColor + "" +
"line-height:12px" + btnBorder + "color:" + this.color + ""
var boardStyle =
"position:absolutewidth:1pxheight:1pxbackground:" + this.bgColor + "top:8pxborder:1px solid "+
this.color + "display:nonepadding:3px"
var buttonEvent =
" onmouseover=\"this.childNodes[0].style.borderBottom='0px'" +
"this.childNodes[1].style.display=''this.style.zIndex=100" +
(this.hidesSelects ?
"var slts=document.getElementsByTagName('SELECT')" +
"for(var i=0i<slts.lengthi++)slts[i].style.visibility='hidden'"
: "") + "\"" +
" onmouseout=\"this.childNodes[0].style.borderBottom='1px solid " + this.color + "'" +
"this.childNodes[1].style.display='none'this.style.zIndex=99" +
(this.hidesSelects ?
"var slts=document.getElementsByTagName('SELECT')" +
"for(var i=0i<slts.lengthi++)slts[i].style.visibility=''"
: "") + "\"" +
" onselectstart=\"return false\""
var mdayStyle = "font:normal 9px Verdana,Arial,宋体line-height:12pxcursor:defaultcolor:" + this.color
var weekStyle = "font:normal 12px 宋体line-height:15pxcursor:defaultcolor:" + this.color
var arrowStyle = "font:bold 7px Verdana,宋体cursor:handline-height:16pxcolor:" + this.color
var ymStyle = "font:bold 12px 宋体line-height:16pxcursor:defaultcolor:" + this.color
var changeMdays =
"var year=parseInt(this.parentNode.cells[2].childNodes[0].innerText)" +
"var month=parseInt(this.parentNode.cells[2].childNodes[2].innerText)" +
"var firstDay=new Date(year,month-1,1)firstDay=firstDay.getDay()" +
"var lastDay=new Date(year,month,0)lastDay=lastDay.getDate()" +
"var tab=this.parentNode.parentNode, day=1" +
"for(var row=2row<8row++)" +
" for(var col=0col<7col++){" +
"if(row==2&&col<firstDay){" +
" tab.rows[row].cells[col].innerHTML=' '" +
" tab.rows[row].cells[col].isDay=0}" +
"else if(day<=lastDay){" +
" tab.rows[row].cells[col].innerHTML=day" +
" tab.rows[row].cells[col].isDay=1day++}" +
"else{" +
" tab.rows[row].cells[col].innerHTML=''" +
" tab.rows[row].cells[col].isDay=0}" +
" }"
var pyEvent =
" onclick=\"var y=this.parentNode.cells[2].childNodes[0]y.innerText=parseInt(y.innerText)-1" +
changeMdays + "\""
var pmEvent =
" onclick=\"var y=this.parentNode.cells[2].childNodes[0]m=this.parentNode.cells[2].childNodes[2]" +
"m.innerText=parseInt(m.innerText)-1if(m.innerText=='0'){m.innerText=12y.innerText=" +
"parseInt(y.innerText)-1}" + changeMdays + "\""
var nmEvent =
" onclick=\"var y=this.parentNode.cells[2].childNodes[0]m=this.parentNode.cells[2].childNodes[2]" +
"m.innerText=parseInt(m.innerText)+1if(m.innerText=='13'){m.innerText=1y.innerText=" +
"parseInt(y.innerText)+1}" + changeMdays + "\""
var nyEvent =
" onclick=\"var y=this.parentNode.cells[2].childNodes[0]y.innerText=parseInt(y.innerText)+1" +
changeMdays + "\""
var mdayEvent =
" onmouseover=\"if(event.srcElement.tagName=='TD'&&event.srcElement.isDay){" +
"event.srcElement.style.backgroundColor='" + this.color + "'" +
"event.srcElement.style.color='" + this.bgColor + "'" +
"event.srcElement.style.cursor='hand'" +
"var ym=event.srcElement.parentNode.parentNode.rows[0].cells[2].childNodes" +
"event.srcElement.title=ym[0].innerText+'-'+ym[2].innerText+'-'+event.srcElement.innerText}\"" +
" onmouseout=\"if(event.srcElement.tagName=='TD'&&event.srcElement.isDay){" +
"event.srcElement.style.backgroundColor='" + this.bgColor + "'" +
"event.srcElement.style.color='" + this.color + "'" +
"event.srcElement.style.cursor='default'" +
"var ym=event.srcElement.parentNode.parentNode.rows[0].cells[2].childNodes" +
"event.srcElement.title=ym[0].innerText+'-'+ym[2].innerText+'-'+event.srcElement.innerText}\"" +
" onclick=\"if(event.srcElement.tagName=='TD'&&event.srcElement.isDay){" +
"var inp=this.parentNode.parentNode.parentNode.previousSibling.childNodes[0]" +
"inp.value=this.rows[0].cells[2].childNodes[0].innerText+'-'+this.rows[0].cells[2].childNodes[2]." +
"innerText+'-'+event.srcElement.innerText" +
"this.parentNode.style.display='none'this.parentNode.parentNode.style.zIndex=99" +
"this.parentNode.previousSibling.style.borderBottom='1px solid " + this.color + "'" +
(this.hidesSelects ?
"var slts=document.getElementsByTagName('SELECT')" +
"for(var i=0i<slts.lengthi++)slts[i].style.visibility=''"
: "") + "}\""
var output = ""
output += "<table cellpadding=0 cellspacing=1 style='display:inline'><tr>"
output += " <td><input size=" + this.inputSize + " maxlength=10 value=\"" + inputValue + "\""
output +=(this.canEdits ? "" : " readonly") + " name=\"" + this.inputName + "\"></td>"
output += " <td width=" + this.buttonWidth + ">"
output += "<div style=\"position:absoluteoverflow:visiblewidth:0pxheight:0px\"" + buttonEvent + ">"
output += " <div style=\"" + btnStyle + "\"><nobr>" + this.buttonWords + "</nobr></div>"
output += " <div style=\"" + boardStyle + "\">"
output += "<table cellspacing=1 cellpadding=1 width=175" + mdayEvent + ">"
output += " <tr height=20 align=center>"
output += "<td style=\"" + arrowStyle + "\" title=\"上一年\"" + pyEvent + "><<</td>"
output += "<td style=\"" + arrowStyle + "\" align=left title=\"上个月\"" + pmEvent + "><</td>"
output += "<td colspan=3 style=\"" + ymStyle + "\" valign=bottom>"
output += " <span>" + year + "</span><span>年</span><span>" + month + "</span><span>月</span>"
output += "</td>"
output += "<td style=\"" + arrowStyle + "\" align=right title=\"下个月\"" + nmEvent + ">></td>"
output += "<td style=\"" + arrowStyle + "\" title=\"下一年\"" + nyEvent + ">>></td>"
output += " </tr>"
output += " <tr height=20 align=center bgcolor=" + this.bgColor + ">"
output += "<td width=14% style=\"" + weekStyle + "\">日</td>"
output += "<td width=14% style=\"" + weekStyle + "\">一</td>"
output += "<td width=14% style=\"" + weekStyle + "\">二</td>"
output += "<td width=14% style=\"" + weekStyle + "\">三</td>"
output += "<td width=14% style=\"" + weekStyle + "\">四</td>"
output += "<td width=14% style=\"" + weekStyle + "\">五</td>"
output += "<td width=14% style=\"" + weekStyle + "\">六</td>"
output += " </tr>"
var day = 1
for (var row=0row<6row++)
{
output += "<tr align=center>"
for (var col=0col<7col++)
{
if (row == 0 &&col <firstDay)
output += "<td style=\"" + mdayStyle + "\"> </td>"
else if (day <= lastDay)
{
output += "<td style=\"" + mdayStyle + "\" isDay=1>" + day + "</td>"
day++
}
else
output += "<td style=\"" + mdayStyle + "\"></td>"
}
output += "</tr>"
}
output += "</table>"
output += " </div>"
output += "</div>"
output += " </td>"
output += "</tr></table>"
document.write(output)
}
/////////////////////////////////////////////////////////////////////////
}