想用js做日历怎么弄？

2023-04-16 07:26:02JavaScript026

想用js做日历怎么弄？,第1张

1.写一个获取当前时间的脚本

2.写一个获取事件源绝对坐标的脚本

3.写一个日历生成脚本，根据年(闰年)月(大小月)周(周一到周日)生成日历

4.当事件源(一般是文本框)获得焦点的时候，触发获取绝对坐标的事件，然后生成当前月的日历，将此日历的坐标用脚本移动到文本框下方

5.生成日历的时候，给所有日添加返回事件，把当前选中的年月日反馈

6.用脚本把反馈回来的日期信息，写入事件源控件

7.网上日历控件一大堆，最好别自己写，很容易蛋疼的

这是我找到的一个js做的日历，不知道是不是你要的，里面有包含时间，其实在日历里面加时间也是比较简单的，只要调用DATE的方法就可以了，希望对你有用。下面是代码段，效果图附上。

<html>

<head>

//定义月历函数

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>

//初始化控制变量

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>

calendar() //显示月历

</script>

</BODY>

</html>

<html>

<title>日期选择 - BY ziyue</title>

/*=======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]