js日期控件支持多语言多浏览器-修正版内含帮助说明与实例资源-CSDN文库

共2个文件

js：1个

html：1个

js日期控件

日期控件

MyCalendar

4星 · 超过85%的资源需积分: 5 177 浏览量 2011-06-02 11:06:11 上传评论收藏 6KB RAR 举报

JavaScript日期控件在网页开发中扮演着重要角色，它们为用户提供直观、易用的日历选择功能，提升用户体验。本文将详细解析"js日期控件支持多语言多浏览器-修正版内含帮助说明与实例"这一资源，特别是其中的MyCalendar日期控件。 MyCalendar控件具有多语言支持能力，这包括中文简体、中文繁体、英文和日文四种语言。这意味着无论用户来自哪个地区，都能方便地与控件进行交互。实现多语言通常需要在代码中设置语言包，根据用户浏览器的设置或用户选择的语言切换不同的文本内容。这种设计使得MyCalendar控件具备更广泛的适用性，能够满足全球用户的需求。 MyCalendar控件兼容多种浏览器，包括Internet Explorer、Firefox、Opera、Google Chrome以及Safari。这意味着开发者无需担心因浏览器差异导致的功能缺失或样式显示问题。考虑到不同浏览器对JavaScript和CSS的解析存在差异，实现良好的跨浏览器兼容性往往需要对代码进行优化，比如使用特征检测而非浏览器检测，以及遵循各种浏览器的样式兼容性标准。关于修正的CSS兼容性问题，这可能涉及到CSS2和CSS3的一些特性在不同浏览器上的应用。例如，盒模型、浮动布局、边框半径、阴影效果等，这些在某些老版本的浏览器中可能不完全支持。开发者可能通过条件注释、前缀或者使用成熟的库如Modernizr来解决这些问题，确保MyCalendar控件在各个浏览器上保持一致的视觉效果。压缩包内的`help.html`可能是MyCalendar控件的使用帮助文档，它会详细介绍如何集成和配置这个控件，包括设置语言、自定义样式、事件处理等。对于开发者来说，这是快速理解和使用控件的重要参考资料。而`MyCalendar.js`是核心的JavaScript文件，包含了日期控件的逻辑和功能实现。通过分析这个文件，开发者可以学习到如何使用JavaScript创建可复用的组件，如何处理DOM操作，以及如何设计事件监听和响应机制。此外，还可能涉及到了日期对象的操作，如格式化日期、计算日期差等。 MyCalendar日期控件是一个跨浏览器、多语言的解决方案，适用于各种Web项目。其提供的帮助文档和实例将有助于开发者快速上手并进行定制化开发。通过研究这个控件，不仅可以提高JavaScript编程技能，还能深入了解如何构建健壮且具有良好用户体验的Web组件。

资源推荐

资源详情

资源评论

收起资源包目录

MyCalendar日期控件2011-06-02支持多语言修正版.rar （2个子文件）

MyCalendar help.html 8KB

MyCalendar.js 15KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MyCalendar 开发文档</title> <style type="text/css">  </style> </head> <body> <script type="text/javascript" src="MyCalendar.js"></script> <form id="form1" name="form1" method="post" action=""> <h1>1、什么是MyCalendar ?</h1> <ul> <li>一个简洁的JavaScript日历控件，可在Java Web 项目，.NET Web 项目中使用</li> </ul> <h1>2、MyCalendar 有什么特点？</h1> <ul> <li>1、小巧，单文件 </li> <li>2、支持多语言，并可自由扩充（目前支持简体中文，繁体中文，英语美国和英语英国）</li> <li> 3、兼容ie6.0+, firefox1.0+, Opera9，其它浏览器未测试</li> <li>4、回显选定的时间，这是很多其它日历控件没有的 </li> <li>5、Apache license 2.0，商业友好。可免费使用，自由修改传播，但请保留版权信息</li> <li>6、用 iframe 解决 IE 中层在 select 控件上显示的问题</li> <li>7、其它特点有待发现...</li> </ul> <h1>3、版本:</h1>ver2011-6-2 <h1>4、使用说明:</h1> <h2>4.1、将 js 文件导入到页面中（可以是 html, jsp, asp, aspx, php）等。</h2> <div class="source"><script type="text/javascript" src="calendar.js"></script></div> <br /> 注意以下点： <ul> <li> MyCalendar.js 文件内容编写是UTF-8，请一定要将此文件的编码设置为UTF-8</li> <li> 上面的代码内容<span class="color_red b">一定要放在HTML的<body></body>之间</span>，特别是在符合XHTML规范的文档中</li> <li>包含此文件后，此页面已经自动实例化了一个日历对象 calendar，现在就可以使用了</li> </ul> <h2>4.2、一个最简单的例子<br /> </h2> <div class="source">用预定义的 calendar 对象生成日历代码：<input name="date" type="text" id="date" onclick=<strong>"calendar.show(this);</strong>" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect">效果： <input name="date" type="text" id="date" onclick="calendar.show(this);" size="10" maxlength="10" readonly="readonly" /> </div> <br /> 当然也可以这样：<br /> </p> <div class="source">new 一个新的日历对象并生成日历代码：<input name="date" type="text" id="date" onclick=<strong>"new Calendar().show(this);</strong>" size="10" maxlength="10" readonly="readonly "/><br /> </div> <br /> <div class="effect">效果： <input name="date2" type="text" id="date2" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly" /> </div> <br /> <h2>4.3、指定开始年份和结束年份的日历<br /> </h2> <div class="source"> 指定开始年份和结束年份的日历代码：<input name="range_date" type="text" id="range_date" onclick="new Calendar(2000, 2008).show(this);" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect"> 只能选择 2000 到 2008年间的日期： <input name="range_date" type="text" id="range_date" onclick="new Calendar(2000, 2008).show(this);" size="10" maxlength="10" readonly="readonly" /> </div> <h2>4.4、多语言版本支持（可自由扩充），目前支持的语言：0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw)</h2> <div class="source"> 中文日历代码： <input name="cn_date" type="text" id="cn_date" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect">中文日历效果： <input name="cn_date" type="text" id="cn_date" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly"/> </div> <br /> <div class="source"> 繁体中文日历代码： <input name="tw_date" type="text" id="tw_date" onclick="new Calendar(null, null, 3).show(this);" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect">繁体中文日历效果： <input name="tw_date" type="text" id="tw_date" onclick="new Calendar(null, null, 3).show(this);" size="10" maxlength="10" readonly="readonly" /> <br /> </div> <br /> <div class="source"> 英文日历代码： <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 1).show(this);" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect">英文日历效果： <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 1).show(this);" size="10" maxlength="10" readonly="readonly" /> </div> <br /> <div class="source"> 日文日历代码： <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 4).show(this);" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect">日文日历效果： <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 4).show(this);" size="10" maxlength="10" readonly="readonly" /> <span style="color:#F00; font-weight: bold;">（感谢网友 yangyuqi[at]gmail.com 提供的日文翻译）</span> </div> <h2>4.5、在一个控件上点击选择，在另外一个控件上显示日期</h2> <div class="source"> 代码：<br /> <input name="control_date" type="text" id="control_date"size="10" maxlength="10" readonly="readonly" /><br /> <input type="button" name="button" id="button" value="选择日期" onclick="new Calendar().show(this.form.control_date);" /><br /> </div> <br /> <div class="effect">效果： <input name="control_date" type="text" id="control_date"size="10" maxlength="10" readonly="readonly" /> <label> <input type="button" name="button" id="button" value="选择日期" onclick="new Calendar().show(this.form.control_date);" /> </label> </div> <h2>4.6、其它功能</h2> 其它功能请参考 MyCalendar.js 源码，里面有详细的注释，本文档源码也是很好的代码资源<br /> <ul> <li>基于 Apache license 2.0，商业友好。可免费使用，自由修改传播，但请保留版权信息</li> </ul> </form> </body> </html>

评论收藏

内容反馈