js日历控件:js日历Control控件(可精确到分钟)

on 2008-12-25 in Javascript教程 | 0 Comment

点击运行可以看到效果:

<style> 
.menu_<img src='/icons/41098if.gif' />rame{position:absolute; visibility:inherit; top:0px; left:0px; width:170px; z-index:-1; filter: Alpha(Opacity=0);} 
.cal_table{ border:#333333 solid 1px; border-collapse:collapse; background:#ffffff; font-size:12px} 
.cal_table td{ border:1px #ffffff solid; } 
.cal_drawdate{ background:#E3EBF6;border-collapse:collapse; width:100%} 
.cal_drawdate td{ border:1px #ffffff solid; } 
.cal_drawtime{ border:0px #ffffff solid; font-size:12px} 
.cal_drawdate td{ border:0px #ffffff solid; } 
.m_field<img src='/icons/41098set.gif' /> { 
    padding: 0,10,5,10; 
    text-align: center; 
    width: 150px; 
} 
.m_legend { 
    font-family: Tahoma; 
    font-size: 11px; 
    padding-bottom: 5px; 
} 
.m_frameborder { 
    border-left: 1px in<img src='/icons/41098set.gif' /> #D4D0C8; 
    border-top: 1px in<img src='/icons/41098set.gif' /> #D4D0C8; 
    border-right: 1px in<img src='/icons/41098set.gif' /> #D4D0C8; 
    border-bottom: 1px in<img src='/icons/41098set.gif' /> #D4D0C8; 
    width: 35px; 
    height: 19px; 
    background-color: #FFFFFF; 
    overflow: hidden; 
    text-align: right; 
    font-family: "Tahoma"; 
    font-size: 10px; 
} 
.m_arrow { 
    width: 16px; 
    height: 8px; 
    background:#cccccc; 
    font-family: "Webdings"; 
    font-size: 7px; 
    line-height: 2px; 
    padding-left: 2px; 
    cursor: default; 
} 
.m_input { 
    width: 12px; 
    height: 14px; 
    border: 0px solid black; 
    font-family: "Tahoma"; 
    font-size: 9px; 
    text-align: right; 
} 
.c_field<img src='/icons/41098set.gif' /> { 
    padding: 0,10,5,10; 
    text-align: center; 
    width: 180px; 
} 
.c_legend { 
    font-family: Tahoma; 
    font-size: 11px; 
    padding-bottom: 5px; 
} 
.c_frameborder { 
    border-left: 1px #D4D0C8; 
    border-top: 1px #D4D0C8; 
    border-right: 1px #FFFFFF; 
    border-bottom: 1px #FFFFFF; 
    background-color: #FFFFFF; 
    overflow: hidden; 
    font-family: "Tahoma"; 
    font-size: 10px; 
    width:100%; 
    height:120px; 
} 
.c_frameborder td { 
    width: 23px; 
    height: 16px; 
    font-family: "Tahoma"; 
    font-size: 11px; 
    text-align: center; 
    cursor: default; 
} 
.c_frameborder .selected { 
    background-color:#0A246A; 
    width:12px; 
    height:12px; 
    color:white; 
    display:block; 
} 
.c_frameborder span { 
    width:12px; 
    height:12px; 
} 
.c_arrow { 
    width: 16px; 
    height: 8px; 
    background:#cccccc; 
    font-family: "Webdings"; 
    font-size: 7px; 
    line-height: 2px; 
    padding-left: 2px; 
    cursor: default; 
} 
.c_year { 
    font-family: "Tahoma"; 
    font-size: 11px; 
    cursor: default; 
    width:55px; 
    height:20px; 
    border:#99B2D3 solid 1px; 
} 
.c_month { 
    width:75px; 
    height:20px; 
    font:11px "Tahoma"; 
    border:#99B2D3 solid 1px; 
} 
.c_dateHead { 
    background-color:#99B2D3; 
    color:#ffffff; 
    border-collapse:collapse; 
} 
.c_dateHead td{ border:0px #ffffff solid; } 
.rightmenu{ 
    float:left; /* 菜单总体水平位置 */ 
    list-style:none; 
    line-height:19px; /* <img src='/icons/41098yi.gif' />级菜单高 */ 
    background:#1371A0 ; /* 所有菜单移出色 */ 
    font-weight: bold; 
    padding:0px; 
    margin:0px; 
border: 1px #000000 solid; 
} 
.rightmenu li{ 
    float:left; /* 菜单总体水平位置 */ 
    list-style:none; 
    line-height:19px; /* <img src='/icons/41098yi.gif' />级菜单高 */ 
    background:#1371A0 ; /* 所有菜单移出色 */ 
    font-weight: bold; 
color:#FFFFFF; 
padding:0px; 
    margin:0px; 
border: 1px #FFFFFF solid; 
} 
.rightmenu li a{ 
    float:left; /* 菜单总体水平位置 */ 
    list-style:none; 
    line-height:19px; /* <img src='/icons/41098yi.gif' />级菜单高 */ 
    background:#1371A0 ; /* 所有菜单移出色 */ 
    font-weight: bold; 
color:#FFFFFF !important; 
padding:0px; 
    margin:0px; 
    border-right: 0px; 
display:block; 
width:80px; 
} 
.rightmenu li a:hover{ 
    float:left; /* 菜单总体水平位置 */ 
    list-style:none; 
    line-height:19px; /* <img src='/icons/41098yi.gif' />级菜单高 */ 
    background:#B2CFDF ; /* 所有菜单移出色 */ 
    font-weight: bold; 
color:#000000 !important; 
padding:0px; 
    margin:0px; 
    border-right: 0px; 
width:80px; 
text-decoration:none; 
} 
</style>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags: js控件 js时间控件 js日期控件 js日历控件

延伸阅读

2011-7-26-- js实现日历控件,T-SQL实现日历控件
2010-12-9-- js日历控件,JS实现在Repeater控件中创建可隐藏区域的代码
2008-12-25-- js脚本:js树形Control控件脚本代码
2008-12-27-- cs控制台代码:一个用js实现控制台Control控件的代码
2009-2-12-- 动态创建控件:在JAVA中使用js动态创建控件的方法
2008-12-27-- js日历:推荐一个小巧的JS日历
2009-2-12-- 日历控件:带日期标注的日历控件
2009-2-12-- 日期控件:日期选择控件
2008-5-23-- 日历控件我也写了个日历控件
2008-8-26-- 日历控件:Javascript下的日历控件（Calendar）

最新评论

发表评论