html5 asp当前日期,Html+Css+ASP 实现日历功能

最近正在做一个考勤管理系统，其中有一个模块需要回显排班，既要把日期显示出来还要把班次名称回显出来。

当然网上有很多开源的日历控件，内容很丰富，质量也杠杠滴。但是，因为功能需求是要把数据库的内容回显在日期上，所以一番讨论研究后，决定自己敲一个日历控件，这个版本是基于ASP的，后续有时间我还会再做一个PHP的。

其实，日历控件最主要的核心就是当前的date 根据date 来判断 当前的年，月以及这个月的排版，其中还有星期几的判断。

Css 代码如下：PS前端设计不是很擅长，样式设计还有待提高...

body{

BACKGROUND-COLOR: #eef2fb;

}

.titlebt {

display: block;

font-weight: bold;

font-size: 12px;

color: #000;

text-indent: 15px;

line-height: 26px;

background-repeat: no-repeat;

}

.contain-date{

width: 60%;

height: 60%;

border-left: 1px solid #1E90FF;

margin: 0 auto;

margin-top:25px;

}

#title {

width: 100%;

height: 60px;

background-color:#1E90FF;

}

.selectBtn {

font-weight: 900;

font-size: 24px;

color: #fff;

cursor: pointer;

text-decoration: none;

padding: 15px 10px 12px;

}

.selectBtn:hover {

background-color: #3D59AB;

}

.Year_Month {

font-weight: 900;

font-size: 24px;

color: #FF8000;

cursor: pointer;

text-decoration: none;

padding: 15px 10px 12px;

width:200px;

margin-left:32%;

display: inline-block;

}

.month {

display: inline-block;

}

.nextMonth {

float: right;

}

#context {

background-color: #fff;

width: 100%;

}

.week {

width: 99.731%;

height: 37px;

border-right: 1px solid #1E90FF;

border-bottom: 1px solid #1E90FF;

}

.week>h3 {

float: left;

color: #808080;

text-align: center;

margin: 0;

padding: 0;

margin-top: 5px;

font-size: 22px;

width:14%;

cursor: pointer;

}

.cont_all{

color:#0B1746;

cursor: pointer;

}

.cont_dayTag{

font-size:1em;margin-bottom:10px;margin-top:10px;text-align: center;text-align: center;

}

.cont_dayTag_else{

font-size:1em;margin-top:10px;text-align: center;

}

.cont_dayTag_end{

margin-top:10px;text-align: center;

}

.cont_dayTag_right{

display:inline-block;width:16%;height:82px;font-size:22px;background-color:#6A5ACD;vertical-align:top;border-bottom: 1px solid #1E90FF; text-align: center;color: #FF9912;

}

.cont_dayTag_right_s{

display:inline-block;width:16%;height:82px;font-size:22px;vertical-align:top;border-bottom: 1px solid #1E90FF;border-right: 1px solid #1E90FF;text-align: center;

}

.cont_dayTag_all{

display:inline-block;width:13.8%;height:82px;font-size:22px;background-color:#6A5ACD;vertical-align:top;border-bottom: 1px solid #1E90FF;border-right:1px solid #1E90FF;text-align: center;color: #FF9912;

}

.cont_dayTag_all_s{

display:inline-block;width:13.8%;height:82px;font-size:22px;vertical-align:top;border-bottom: 1px solid #1E90FF;border-right:1px solid #1E90FF;text-align: center;

}

.cont_dayTag_all_s:hover{

background-color: #1E90FF;

cursor: pointer;

color: #F0FFF0;

}

.cont_dayTag_right_s:hover{

background-color: #1E90FF;

cursor: pointer;

color: #F0FFF0;

}

ASP代码如下：

dim tdate

if request.Form("hiddendate")="" then

tdate=date()

else

if request.Form("hiddenflag")="1" then

tdate=DateAdd("m",-1,cdate(request.Form("hiddendate")))

elseif request.Form("hiddenflag")="2" then

tdate=DateAdd("m",1,cdate(request.Form("hiddendate")))

end if

end if

%>

<

年月

>

日

一

二

三

四

五

六

dim flag,monF,tdmonth,html,tFlag,i,w,dayTag

flag=0 //满足星期几的标记

monF=cdate(year(tdate)&"-"&month(tdate)&"-1") //每月的第一天

tdmonth=month(tdate) //存放当前是第几月，用来判断当前日期是否属于这个月份，不属于则跳出

tFlag=0 //跳出第１个for循环后，跳出第２个for循环的标记

html="" //存放html代码

for i=1 to 6

html=html&"

"

for w=1 to 7

if cint(Weekday(monF))=w then '判断当前是星期几'

if flag=0 then

flag=1

end if

end if

if flag=1 then

if monF=date() then

dayTag="

"&day(monF)&"

"

elseif monF=tdate then

dayTag="

"&day(monF)&"

"

else

dayTag="

"&day(monF)&"

"

end if

'这里需要回显一个数据库的字段值，所以多嵌套了一个div'

if monF = date() then

if w = 7 then '判断是否是星期六，考虑到最右边的css样式'

html=html&"

"&dayTag&"周末班

"

else

html=html&"

"&dayTag&"周末班

"

end if

elseif monF = tdate then

if w = 7 then

html=html&"

"&dayTag&"

"

else

html=html&"

"&dayTag&"

"

end if

else

if w = 7 then

html=html&"

"&dayTag&"

"

else

html=html&"

"&dayTag&"

"

end if

end if

monF=monF+1

else

if w = 7 then

html=html&"

else

html=html&"

end if

end if

if month(monF)<>tdmonth then

tFlag=1

exit for

end if

next

html=html&"

"

if tFlag=1 then exit for

next

%>

最终完成的效果图：