2.写一个获取事件源绝对坐标的脚本
3.写一个日历生成脚本，根据年(闰年)月(大小月)周(周一到周日)生成日历
4.当事件源(一般是文本框)获得焦点的时候，触发获取绝对坐标的事件，然后生成当前月的日历，将此日历的坐标用脚本移动到文本框下方
5.生成日历的时候，给所有日添加返回事件，把当前选中的年月日反馈
6.用脚本把反馈回来的日期信息，写入事件源控件
7.网上日历控件一大堆，最好别自己写，很容易蛋疼的
这是我找到的一个js做的日历，不知道是不是你要的，里面有包含时间，其实在日历里面加时间也是比较简单的，只要调用DATE的方法就可以了，希望对你有用。下面是代码段，效果图附上。
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
//定义月历函数
function calendar() {
var today = new Date() //创建日期对象
year = today.getYear() //读取年份
thisDay = today.getDate() //读取当前日
//创建每月天数数组
var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
//如果是闰年，2月份的天数为29天
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29
daysOfCurrentMonth = monthDays[today.getMonth()] //从每月天数数组中读取当月的天数
firstDay = today//复制日期对象
firstDay.setDate(1) //设置日期对象firstDay的日为1号
startDay = firstDay.getDay() //确定当月第一天是星期几
//定义周日和月份中文名数组
var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月")
//创建日期对象
var newDate = new Date()
//创建表格
document.write("<TABLE BORDER='0' CELLSPACING='0' CELLPADDING='2' ALIGN='CENTER' BGCOLOR='#0080FF'>")
document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='#88FF99'>")
document.write("<TR><th colspan='7' bgcolor='#C8E3FF'>")
//显示当前日期和周日
document.writeln("<FONT STYLE='font-size:9ptColor:#FF0000'>" + newDate.getYear() + "年" + monthNames[newDate.getMonth()] + " " + newDate.getDate() + "日 " + dayNames[newDate.getDay()] + "</FONT>")
//显示月历表头
document.writeln("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>日</FONT></TH>")
document.writeln("<th bgcolor='#0080FF'><FONT STYLE='font-size:9ptColor:White'>一</FONT></TH>")
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>二</FONT></TH>")
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>三</FONT></TH>")
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>四</FONT></TH>")
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>五</FONT></TH>")
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>六</FONT></TH>")
document.writeln("</TR><TR>")
//显示每月前面的"空日"
column = 0
for (i=0 i<startDay i++) {
document.writeln(" <TD><FONT STYLE='font-size:9pt'> </FONT></TD>")
column++
}
//如果是当前日就突出显示(红色)，否则正常显示(黑色)
for (i=1 i<=daysOfCurrentMonth i++) {
if (i == thisDay) {
document.writeln("</TD><TD ALIGN='CENTER'><FONT STYLE='font-size:9ptColor:#ff0000'><B>")
}
else {
document.writeln("</TD><TD BGCOLOR='#88FF99' ALIGN='CENTER'><FONT STYLE='font-size:9ptfont-family:Arialfont-weight:boldColor:#000000'>")
}
document.writeln(i)
if (i == thisDay) document.writeln("</FONT></TD>")
column++
if (column == 7) {
document.writeln("<TR>")
column = 0
}
}
document.writeln("<TR><TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>")
document.writeln("<FORM NAME='time' onSubmit='0'><FONT STYLE='font-size:9ptColor:#ffffff'>")
//显示当前时间
document.writeln("当前时间:<INPUT TYPE='Text' NAME='textbox' ALIGN='TOP'></FONT></TD></TR></TABLE>")
document.writeln("</TD></TR></TABLE></FORM>")
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//初始化控制变量
var timerID = null
var timerRunning = false
//定义时间显示函数
function stoptime (){
if(timerRunning)
clearTimeout(timerID)
timerRunning = false}
//定义显示时间函数
function showtime () {
var newDate = new Date()
var hours = newDate.getHours()
var minutes = newDate.getMinutes()
var seconds = newDate.getSeconds()
var timeValue = " " + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " 下午 " : " 上午 "
document.time.textbox.value = timeValue
timerID = setTimeout("showtime()",1000)//设置超时,使时间动态显示
timerRunning = true}
//显示当前时间
function starttime () {
stoptime()
showtime()}
</SCRIPT>
</head>
<BODY onLoad="starttime()" TEXT="#000000" TOPMARGIN="0">
<script language="JavaScript" type="text/javascript">
calendar() //显示月历
</script>
</BODY>
</html>
<html><head><meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>日期选择 - BY ziyue</title>
<script language="JavaScript" type="text/JavaScript">
/*=======Calendar.js=======By Jiang Hongbin=======*/
var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月")
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
var days = new Array("日","一", "二", "三", "四", "五", "六")
var today
document.writeln("<div id='Calendar' style='position:absolutez-index:1visibility: hiddenfilter:\"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)\"'></div>")
function getDays(month, year)
{
//下面的这段代码是判断当前是否是闰年的
if (1 == month)
return ((0 == year % 4) &&(0 != (year % 100))) || (0 == year % 400) ? 29 : 28
else
return daysInMonth[month]
}
function getToday()
{
//得到今天的年,月,日
this.now = new Date()
this.year = this.now.getFullYear()
this.month = this.now.getMonth()
this.day = this.now.getDate()
}
function getStringDay(str)
{
//得到输入框的年,月,日
var str=str.split("-")
this.now = new Date(parseFloat(str[0]),parseFloat(str[1])-1,parseFloat(str[2]))
this.year = this.now.getFullYear()
this.month = this.now.getMonth()
this.day = this.now.getDate()
}
function newCalendar() {
var parseYear = parseInt(document.all.Year.options[document.all.Year.selectedIndex].value)
var newCal = new Date(parseYear, document.all.Month.selectedIndex, 1)
var day = -1
var startDay = newCal.getDay()
var daily = 0
if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
day = today.day
var tableCal = document.all.calendar
var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear())
for (var intWeek = 1intWeek <tableCal.rows.lengthintWeek++)
for (var intDay = 0intDay <tableCal.rows[intWeek].cells.lengthintDay++)
{
var cell = tableCal.rows[intWeek].cells[intDay]
if ((intDay == startDay) &&(0 == daily))
daily = 1
if(day==daily) //今天，调用今天的Class
{
cell.style.background='#6699CC'
cell.style.color='#FFFFFF'
//cell.style.fontWeight='bold'
}
else if(intDay==6) //周六
cell.style.color='green'
else if (intDay==0) //周日
cell.style.color='red'
if ((daily >0) &&(daily <= intDaysInMonth))
{
cell.innerText = daily
daily++
}
else
cell.innerText = ""
}
}
function GetDate(InputBox)
{
var sDate
//这段代码处理鼠标点击的情况
if (event.srcElement.tagName == "TD")
if (event.srcElement.innerText != "")
{
sDate = document.all.Year.value + "-" + document.all.Month.value + "-" + event.srcElement.innerText
eval("document.all."+InputBox).value=sDate
HiddenCalendar()
}
}
function HiddenCalendar()
{
//关闭选择窗口
document.all.Calendar.style.visibility='hidden'
}
function ShowCalendar(InputBox)
{
var x,y,intLoop,intWeeks,intDays
var DivContent
var year,month,day
//var o=document.getElementById(InputBox)
var o=InputBox
var oid=o.id
var thisyear//真正的今年年份
if(!oid)oid=o.name
thisyear=new getToday()
thisyear=thisyear.year
today = o.value
if(isDate(today))
today = new getStringDay(today)
else
today = new getToday()
//显示的位置
x=o.offsetLeft
y=o.offsetTop
while(o=o.offsetParent)
{
x+=o.offsetLeft
y+=o.offsetTop
}
document.all.Calendar.style.left=x+2
document.all.Calendar.style.top=y+20
document.all.Calendar.style.visibility="visible"
//下面开始输出日历表格(border-color:#9DBAF7)
DivContent="<table border='0' cellspacing='0' style='border:1px solid #0066FFbackground-color:#EDF2FC'>"
DivContent+="<tr>"
DivContent+="<td style='border-bottom:1px solid #0066FFbackground-color:#C7D8FA'>"
//年
DivContent+="<select name='Year' id='Year' onChange='newCalendar()' style='font-family:Verdanafont-size:12px'>"
for (intLoop = thisyear - 100intLoop <(thisyear + 2)intLoop++)
DivContent+="<option value= " + intLoop + " " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop + "</option>"
DivContent+="</select>"
//月
DivContent+="<select name='Month' id='Month' onChange='newCalendar()' style='font-family:Verdanafont-size:12px'>"
for (intLoop = 0intLoop <months.lengthintLoop++)
DivContent+="<option value= " + (intLoop + 1) + " " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop] + "</option>"
DivContent+="</select>"
DivContent+="</td>"
DivContent+="<td style='border-bottom:1px solid #0066FFbackground-color:#C7D8FAfont-weight:boldfont-family:Wingdings 2,Wingdings,Webdingsfont-size:16pxpadding-top:2pxcolor:#4477FFcursor:hand' align='center' title='关闭' onClick='javascript:HiddenCalendar()'>S</td>"
DivContent+="</tr>"
DivContent+="<tr><td align='center' colspan='2'>"
DivContent+="<table id='calendar' border='0' width='100%'>"
//星期
DivContent+="<tr>"
for (intLoop = 0intLoop <days.lengthintLoop++)
DivContent+="<td align='center' style='font-size:12px'>" + days[intLoop] + "</td>"
DivContent+="</tr>"
//天
for (intWeeks = 0intWeeks <6intWeeks++)
{
DivContent+="<tr>"
for (intDays = 0intDays <days.lengthintDays++)
DivContent+="<td onClick='GetDate(\"" + oid + "\")' style='cursor:handborder-right:1px solid #BBBBBBborder-bottom:1px solid #BBBBBBcolor:#215DC6font-family:Verdanafont-size:12px' align='center'></td>"
DivContent+="</tr>"
}
DivContent+="</table></td></tr></table>"
document.all.Calendar.innerHTML=DivContent
newCalendar()
}
function isDate(dateStr)
{
var datePat = /^(\d{4})(\-)(\d{1,2})(\-)(\d{1,2})$/
var matchArray = dateStr.match(datePat)
if (matchArray == null) return false
var month = matchArray[3]
var day = matchArray[5]
var year = matchArray[1]
if (month <1 || month >12) return false
if (day <1 || day >31) return false
if ((month==4 || month==6 || month==9 || month==11) &&day==31) return false
if (month == 2)
{
var isleap = (year % 4 == 0 &&(year % 100 != 0 || year % 400 == 0))
if (day >29 || (day==29 &&!isleap)) return false
}
return true
}
</script>
<style type="text/css">
<!--
td,input {
font-family: Verdana, Arial, Helvetica, sans-serif
font-size: 12px
}
-->
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table width="500" border="0" align="center" cellspacing="1" bgcolor="#CCCCCC">
<tr bgcolor="#FFFFFF">
<td align="right">您的生日：</td>
<td><input name="birthday" type="text" id="birthday" title="点击选择" onClick="javascript:ShowCalendar(this)" size="20">
<input type="button" name="Submit" value="选 择" onClick="javascript:ShowCalendar(form1.birthday)"></td>
<td>BLOG:<a href="http://web-v.com/">http://web-v.com/</a></td>
</tr>
</table>
</form>
</body>
</html>
