JS日历代码求助?

JavaScript013

JS日历代码求助?,第1张

不需要看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)

}

/////////////////////////////////////////////////////////////////////////

}