社区
JavaScript
帖子详情
求一个js日历,,,
phuson
2008-06-19 02:19:19
2008年 6月
19
星 期 四
丁亥年五月十七
类似以上格式,要精致漂亮一点的,最好与现实中的那种一天撕一张的日历比较像
...全文
102
3
打赏
收藏
求一个js日历,,,
2008年 6月 19 星 期 四 丁亥年五月十七 类似以上格式,要精致漂亮一点的,最好与现实中的那种一天撕一张的日历比较像
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
3 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
phuson
2008-06-20
打赏
举报
回复
你给的日历是挺漂亮的,但不是我要的那种,我要的是那种像现实中一天撕一张的那种,不要选择输入,只要显示即可。
gesanri
2008-06-19
打赏
举报
回复
CSS文件(保存为calendar.css)
.body,td{
font-family:"Arial";
font-size:9pt;
color:#000000;
}
.TrOut{
background:#dddddd;
height:26;
border:1 solid #999999;
border-top-color:#f4f4f4;
border-left-color:#f4f4f4;
}
.TdOver{
background:#eeeeee;
height:20;
border:1 solid #ffffff;
border-top-color:#9c9c9c;
border-left-color:#9c9c9c;
color:red;
}
.TdOut{
background:#eeeeee;
height:20;
border:1 solid #9c9c9c;
border-top-color:#ffffff;
border-left-color:#ffffff;
}
.input2
{
BORDER: #838383 1px solid;
BACKGROUND-COLOR: #dff0EE;
font-weight: normal;
line-height: 120%
}
使用例子(TEMP.htm):
<link rel="stylesheet" href="calendar.css">
<script language="javascript" src="calendar.js"></script>
<form action="moneydetail.asp" method="post" id="aaafrm1" name="frm1.asp">
<table width="700" border="0" cellpadding="0" cellspacing="0" valign="top">
<tr align="center">
<td colspan="15" >
开始: <input type="text" name="startdate" size="8" ID="Text3" >
<input type="button" name="show" value="选择" onClick="window.event.cancelBubble=true;showdate('startdate');"
class="button1" ID="Button3"> 截止: <input type="text" name="enddate" ID="Text4" size=8 >
<input type="button" name="show" value="选择" onClick="window.event.cancelBubble=true;showdate('enddate');"
class="button1" ID="Button4">
<input name="active" type="submit" class="button" value="时间查询" ID="Submit1">
</td>
</tr>
</table>
</form>
gesanri
2008-06-19
打赏
举报
回复
JS文件(保存为calendar.js):
var SelectDateObj;
function getobjectx(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
function getobjecty(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
function hidedate()
{
if(document.all.SelectDateList.style.display=='block')
document.all.SelectDateList.style.display='none';
}
function showdate(txtid)
{
SelectDateObj=eval("document.all."+txtid);
if(document.all.SelectDateList.style.display=='block')
document.all.SelectDateList.style.display='none';
else
{
TableFunction().JumpToRun("start");
//posX = event.clientX ;
//posY = event.clientY ;
var x,y;
x=getobjectx(SelectDateObj) ;
y=getobjecty(SelectDateObj) ;
document.all.SelectDateList.style.left = x+SelectDateObj.offsetWidth;
document.all.SelectDateList.style.top = y+SelectDateObj.offsetHeight;
document.all.SelectDateList.style.display='block';
}
}
function TableFunction()
{
this.GetDateStr=function(y,m)
{
this.DayArray=[];
for(var i=0;i<42;i++)this.DayArray[i]=" ";
for(var i=0;i<new Date(y,m,0).getDate();i++)this.DayArray[i+new Date(y,m-1,1).getDay()]=i+1;
return this.DayArray;
}
this.GetTableStr=function(y,m)
{
this.DateArray=["日","一","二","三","四","五","六"];
this.DStr="<div id=SelectDateList name=SelectDateList style='display:none;position:absolute;'>"
this.DStr=this.DStr+"<table oncontextmenu='return false' onselectstart='return false' style='width:160;cursor:default;border:1 solid #9c9c9c;border-right:0;border-bottom:0;filter:progid:dximagetransform.microsoft.dropshadow(color=#e3e3e3,offx=3,offy=3,positive=true)' border='0' cellpadding='0' cellspacing='0'>\n"+
"<tr><td colspan='7' class='TrOut'>"+
"<table width='100%' height='100%'border='0' cellpadding='0' cellspacing='0'><tr align='center'>\n"+
"<td width='20' style='font-family:\"webdings\";font-size:9pt' onclick='TableFunction().JumpToRun(\"b\")' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>3</td>\n"+
"<td id='YearTD' width='70' onmouseover='this.style.background=\"#cccccc\"' onmouseout='this.style.background=\"\"' onclick='TableFunction().WriteSelect(this,this.innerText.split(\" \")[0],\"y\",false)'>"+y+" 年</td>\n"+
"<td id='MonthTD' width='47' onmouseover='this.style.background=\"#cccccc\"' onmouseout='this.style.background=\"\"' onclick='TableFunction().WriteSelect(this,this.innerText.split(\" \")[0],\"m\",false)'>"+m+" 月</td>\n"+
"<td width='20' style='font-family:\"webdings\";font-size:9pt' onclick='TableFunction().JumpToRun(\"n\")' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>4</td></tr></table>\n"+
"</td></tr>\n"+
"<tr align='center'>\n";
for(var i=0;i<7;i++)
this.DStr+="<td class='TrOut'>"+DateArray[i]+"</td>\n";
this.DStr+="</tr>\n";
for(var i=0;i<6;i++)
{
this.DStr+="<tr align='center'>\n";
for(var j=0;j<7;j++)
{
var CS=new Date().getDate()==this.GetDateStr(y,m)[i*7+j]?"TdOver":"TdOut";
this.DStr+="<td id='TD' class='"+CS+"' cs='"+CS+"' onmouseover='this.className=\"TdOver\"' onmouseout='if(this.cs!=\"TdOver\")this.className=\"TdOut\"' onclick='TableFunction().AlertDay()'>"+this.GetDateStr(y,m)[i*7+j]+" </td>\n";
}
this.DStr+="</tr>\n";
}
this.DStr+="</table></div>";
return this.DStr;
}
this.WriteSelect=function(obj,values,action,getobj)
{
if(values=="")return;
if(getobj)
{
obj.innerHTML=values+(action=="y"?" 年":" 月");
this.RewriteTableStr(YearTD.innerText.split(" ")[0],MonthTD.innerText.split(" ")[0]);
return false;
}
var StrArray=[];
if(action=="y")
{
for(var i=0;i<15;i++)
{
var year=values-7+i;
StrArray[i]="<option value='"+year+"' "+(values==year?"selected":"")+"> "+year+"年</option>\n";
}
obj.innerHTML="<select id='select1' style='width:67' onchange='TableFunction().WriteSelect(parentElement,this.value,\"y\",true)' onblur='YearTD.innerText=this.value+\" 年\"'>\n"+StrArray.join("")+"</select>";
select1.focus();
}
if(action=="m")
{
for(var i=1;i<13;i++)
StrArray[i]="<option value='"+i+"' "+(i==values?"selected":"")+"> "+i+"月</option>\n";
obj.innerHTML="<select id='select2' style='width:47' onchange='TableFunction().WriteSelect(parentElement,this.value,\"m\",true)' onblur='MonthTD.innerText=this.value+\" 月\"'>\n"+StrArray.join("")+"</select>";
select2.focus();
}
}
this.RewriteTableStr=function(y,m)
{
var TArray=this.GetDateStr(y,m);
var len=TArray.length;
for(var i=0;i<len;i++)
{
TD[i].innerHTML=TArray[i]+" ";
TD[i].className="TdOut";
TD[i].cs="TdOut";
if(new Date().getYear()==y&&new Date().getMonth()+1==m&&new Date().getDate()==TArray[i])
{
TD[i].className="TdOver";
TD[i].cs="TdOver";
}
}
}
this.JumpToRun=function(action)
{
var YearNO=YearTD.innerText.split(' ')[0];
var MonthNO=MonthTD.innerText.split(' ')[0];
if(action=="b")
{
if(MonthNO=="1")
{
MonthNO=13;
YearNO=YearNO-1;
}
MonthTD.innerText=MonthNO-1+" 月";
YearTD.innerText=YearNO+" 年";
this.RewriteTableStr(YearNO,MonthNO-1);
}
if(action=="n")
{
if(MonthNO=="12")
{
MonthNO=0;
YearNO=YearNO-(-1);
}
YearTD.innerText=YearNO+" 年";
MonthTD.innerText=MonthNO-(-1)+" 月";
this.RewriteTableStr(YearNO,MonthNO-(-1));
}
if(action=="start")
{
MonthNO=new Date().getMonth();
YearNO=new Date().getYear();
YearTD.innerText=YearNO+" 年";
MonthTD.innerText=MonthNO-(-1)+" 月";
this.RewriteTableStr(YearNO,MonthNO-(-1));
}
}
this.AlertDay=function()
{
if(event.srcElement.innerText!=" ")
SelectDateObj.innerText=YearTD.innerText.split(' ')[0]+"-"+MonthTD.innerText.split(' ')[0]+"-"+event.srcElement.innerText;
document.all.SelectDateList.style.display="none";
}
return this;
}
function selectfunction(timename,timevalue)
{
var timobj = eval("document.all."+timename)
with(timobj)
{
length = 24;
for(var i=0;i < 24;i++)
{
options[i].value=i;
options[i].text=i;
if (i == timevalue)
{
timobj.selectedIndex=timevalue;
}
}
}
}
document.write(TableFunction().GetTableStr(new Date().getYear(),new Date().getMonth()+1));
js
日历
js
日历
例子 javascript
日历
简单易用的javascript
日历
,包括
一个
例子。编码可以是utf-8也可以是GBK
6个
JS
日历
控件个
JS
日历
控件
个
JS
日历
控件个
JS
日历
控件个
JS
日历
控件个
JS
日历
控件个
JS
日历
控件个
JS
日历
控件个
JS
日历
控件个
JS
日历
控件个
JS
日历
控件个
JS
日历
控件个
JS
日历
控件个
JS
日历
控件
js
酒店价格
日历
_
js
门票价格
日历
_javascript价格
日历
此程序是javascript和php开发,提供酒店、门票订购的价格
日历
和点击
日历
订购产品功能。详细请参考驴妈妈 酒店和门票的价格
日历
。 index.html 入口文件 data.php 包含
一个
价格
日历
生成类和 一些实例 product.php ajax产品的
js
on格式 style 样式和
js
文件 说明: 此程序中
js
是驴妈妈上的,我做了些修改,做学习用,精简了代码和功能,只提供酒店和门票,部分提交url请自己修改。php生成
日历
的类是自己原创的。不足之处请反馈。
用
js
的
一个
日历
用
js
的
一个
日历
用
js
的
一个
日历
选择框,用
js
的
一个
日历
选择框用
js
的
一个
日历
选择框用
js
的
一个
日历
选择框
js
日历
控件
js
日历
控件
js
日历
控件
js
日历
控件
js
日历
控件
js
日历
控件
js
日历
控件
js
日历
控件
js
日历
控件
js
日历
控件
js
日历
控件
js
日历
控件
JavaScript
87,907
社区成员
224,614
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章