- 1、本文档共8页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
JS制作简单的日历控件【JS Date对象练习实例】
一直对JS 中的Date 对象不是很熟练,缺乏操作实践,端午节抽空复习了一下,做了一个简单的日期选择控件
日历外观参考了淘宝旅行中的日期控件,控件只有基本功能,木有做节日显示,木有做IE6的SELECT遮挡控制 ,仅供练习:
使用方法:
只需传入日期INPUT元素的ID即可,isSelect选项为是否为SELECT下拉选择年月设置
var myDate1 = new Calender({id:j_Date1});
var myDate2 = new Calender({id:j_Date2,isSelect:!0});
演示如下:
支持选择年月 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 支持SELECT选择年月
? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
?
没空做教程啦,有兴趣的看源代码吧,详细源代码+注释如下:
!DOCTYPE HTML
html
head
meta charset=utf-8
title日历组件示例/title
style
.calendar{font-family:Tahoma; background:#fff; float:left; border-style:solid; border-width:1px; border-color:#85BEE5 #3485C0 #3485C0 #85BEE5; position:relative; padding:10px; overflow:hidden;}
.calendar dl,.calendar dd{margin:0; padding:0; width:183px; font-size:12px; line-height:22px;}
.calendar dt.title-date{ display:block; border-bottom:1px solid #E4E4E4; font-weight:700; position:relative; margin-bottom:5px;}
.calendar dt{ float:left; width:25px; margin-left:1px; text-align:center;}
.calendar dt.title-date{ width:100%;}
.calendar dd{clear: both;width: 183px;height: 139px;font-weight: 700;background:url(/cnblogs_com/NNUF/379856/o_bg.png) no-repeat; margin:0;}
.prevyear,.nextyear, .prevmonth,.nextmonth{cursor:pointer;height:9px; background:url(/cnblogs_com/NNUF/379856/o_nextprv.png) no-repeat; overflow:hidden;position:absolute; top:8px; text-indent:-999px;}
.prevyear{ left:4px; width:9px;}
.prevmonth{ width:5px; background-position:-9px 0; left:20px;}
.nextyear{ width:9px; background-position:-19px 0; right:5px;}
.nextmonth{ width:5px; background-position:-14px 0; right:20px;}
.calendar dd a{float: left;width: 25px;height: 22px; color:blue; overflow: hidden; text-decoration: none;
margin: 1px 0 0 1px; text-align:center;}
.calendar dd a.disabled{color:#999;}
.calendar dd a.tody{ color:red; }
.calendar dd a.on{background:blue; color:#fff;}
您可能关注的文档
- hypertronics连接器中国授权总代理商.doc
- htri 管壳式换热器 xist.docx
- ic65断路器选型表.pdf
- icf的主要目的与应.ppt
- 人物描写的运用很普遍.docx
- dcs系统检查和维护作业指导说明书.docx
- 下半年天津注册会计师考试审计监盘库存现金模拟试题.docx
- 110kv电缆线路工程施工组织设计.docx
- ic卡散热器温度调节阀.doc
- ic黑钻石10年创造10兆产值!.doc
- 分析let s单元56ago2卷纸zheng unit56.pdf
- 塑胶材料其它分类原料pa9t 12.pdf
- md16x16数字媒体切换器设备.pdf
- 者参考项目发起人学科类型单位序列承包商修订页代码顺序典型.pdf
- 届世界天然气大会阿姆斯特丹2006add10288.pdf
- 期测试记录表每周weekly g1g6 journeys tests level 6 lesson26.pdf
- modernize-whitepaper现代化您应用程序白皮书.pdf
- anybackup产品典型案例分析.pdf
- 约克金融工程课程tfeslide32.pdf
- 广州市妇女儿童医疗中心历份教学药历01tjy.pdf
文档评论(0)