📄 main.htm
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>My97 DatePicker 3.0 演示 - 主要文件</title>
<script language="javascript" type="text/javascript" src="../My97DatePicker/WdatePicker.js"></script>
<style>
*{font-size:9pt;line-height:20px}
.title{font-size:16px;color:#0000FF;font-weight:bold}
.con{margin-left:15px;}
.STYLE1 {color: #FF0000}
.STYLE2 {color: #0000FF}
.STYLE3 {color: #009900}
</style>
</head>
<body>
<p><font color="#0000FF" style="font-size:18px">My97日期控件 My97 DatePicker Ver 3.0.1</font></p>
<p><span class="title">3.0.1修正的问题</span><a name="m3.0.1" id="m3.0.1"></a></p>
<p>1.修正与很多JS库(如prototype,JQuery,dwr等)的冲突问题<br />
2.解决不能“后退”的问题
<br />
3.解决IE6中,今天和选中的日期没有以其它颜色显示的问题<br />
4.解决日期选择器被动态增加的iframe覆盖的问题</p>
<p><span class="title"><a name="m1" id="m1"></a><br />
一. 注意事项和简介</span></p>
<p class="title"><a name="m11" id="m11"></a><br />
1. 注意事项</p>
<p class="STYLE1"> 1. My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名<br />
2. My97DatePicker.htm是必须文件,不可删除<br />
3. 各目录及文件的用途:<span class="STYLE2"> <br />
WdatePicker.js(导入文件,在调用的地方仅需使用该文件) <br />
config.js(主配置文件) calendar.js(日期库主文件) My97DatePicker.htm(临时页面文件)<br />
目录lang(存放语言文件) 目录skin(存放皮肤的相关文件)</span><br />
4. 在input里加上class="Wdate"就会在选择框右边加上日期图标,如果你不喜欢这个样式,可以把class="Wdate"去掉,<br />
另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式</p>
<p class="STYLE1"> </p>
<p class="title"><span class="STYLE1"><a name="m12" id="m12"></a></span><br />
2. 更新和修正的内容</p>
<p>1.优化了速度和内存占用<br />
2.增加realValue 的格式设置<br />
3.增强日期范围限制<br />
可以使用#Year# #Month# #Day# #lastDay#<br />
如:本月最后一天#Year#-#Month#-#lastDay#<br />
明年今天(注意有运算的地方,比如+1,必须用{}) : {#Year#+1}-#Month#-#Day#<br />
函数 #F{function}<br />
比如用另一个框(id是test1)的值作为最小日期,则 MINDATE="#F{$('test1').value}"<br />
4.当日期格式设置为 %h:%m:%s 只有时间选择了<br />
5.增加年份月份导航,增加清空按钮<br />
6.增加显示位置设置(上面 下面 自动(默认))<br />
7.增加文件包路径设置(在wdatepicker.js文件里,默认为空,程序会自动计算路径)<br />
8.增加自定义触发事件,可以在日期框添加属性 onpicked="function(){}" 来自定义触发事件<br />
9.增加多语言自动选择功能,系统会根据用户浏览器语言自动选择 简体 繁体 和英文<br />
<br />
修正抖屏<br />
修正在XHTML 1.0下不兼容的问题<br />
修正2007-3-31 修改成2月份时变为2007-2-31的bug<br />
修正frame中跳转时没销毁的bug<br />
修正css路径,不必将文件包放根目录下了</p>
<p><span class="title"><a name="m2" id="m2"></a><br />
二. 功能介绍</span><br />
<a name="m21" id="m21"></a><br />
<span class="title">1. 自动切换语言</span><span class="STYLE1">(新增)</span><br />
日期控件会根据用户的浏览器语言自动切换,自带3中语言,<span class="STYLE2">简体中文</span>,<span class="STYLE2">繁体中文</span>和<span class="STYLE2">英文</span><br />
相关配置文件在<span class="STYLE2"><strong> lang目录</strong></p>
<p> </p>
<p><span class="title"><a name="m22" id="m22"></a><br />
2. 支持自定义皮肤和动态切换皮肤</span><br />
<font color="#0000FF">默认皮肤default</font>:即skin=default 主调函数:onfocus="new WdatePicker(this)" <br />
示例2-1:
<input class="Wdate" type="text" onfocus="new WdatePicker(this)"/>
<br />
<font color="#0000FF">whyGreen皮肤</font>:即skin=whyGreen 主调函数:onfocus="new WdatePicker(this,null,false,<font color="#0000FF">'whyGreen'</font>)" <br />
<font color="#FF0000">注意:</font><font color="#0000FF">'whyGreen'</font><font color="#FF0000">要带上单引号,因为是字符串 <br />
</font> 示例2-2:
<input class="Wdate" type="text" onfocus="new WdatePicker(this,null,false,'whyGreen')"/>
</p>
<p> </p>
<p><span class="title"><a name="m23" id="m23"></a><br />
3. 自定义事件(onPicked)</span><span class="STYLE1">(新增)</span><br />
事件名称:<span class="STYLE2">onPicked</span> 事件触发条件:<span class="STYLE2">选择日期的时候<br />
示例:利用onPicked实现日期选择联动</span>(选择第一个日期的时候,第二个日期选择框自动弹出)<br />
<input class="Wdate" type="text" id="hts" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" maxdate="#F{$('hte').value}" <span class="STYLE1">onPicked="$('hte').onfocus()"</span>/><br />
注:<span class="STYLE1"> hte </span>是后面那个选择框的id<br />
合同有效期从
<input class="Wdate" type="text" id="hts" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" maxdate="#F{$('hte').value}" onpicked="$('hte').onfocus()"/>
到
<input class="Wdate" type="text" id="hte" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" mindate="#F{$('hts').value}" maxdate="2020-1-1"/>
</p>
<p> </p>
<p><span class="title"><a name="m24" id="m24"></a><br />
4.日期范围限制</span><span class="STYLE1">(增强)</span><br />
<a name="m241" id="m241"></a><br />
<span class="STYLE2">4.1 日期范围限制(静态限制,日期格式必须与config.js中的realValueShortFmt一致)</span><br />
<font color="#0000FF">相关属性:</font><font color="#0000FF">MINDATE</font>(最小日期) <font color="#0000FF">MAXDATE</font>(最大日期)<br />
<input class="Wdate" type="text" onfocus="new WdatePicker(this)" <font color="#FF0000">MINDATE="2006-10-8"</font> <font color="#FF0000">MAXDATE="2008-12-20"</font>/><br />
<font color="#0000FF">示例 4.1-1</font>(限制日期的范围是 2006-10-8到2008-12-20 ):
<input class="Wdate" type="text" onfocus="new WdatePicker(this)" mindate="2006-10-8" maxdate="2008-12-20"/>
<br />
<a name="m242" id="m242"></a><br />
<span class="STYLE2">4.2 日期范围限制(动态限制)</span><br />
<font color="#0000FF">相关属性:</font><font color="#0000FF">MINDATE</font>(最小日期) <font color="#0000FF">MAXDATE</font>(最大日期)<br />
<span class="STYLE2">动态变量:</span> #Year#(今年) #Month#(本月) #Day#(今天) #lastDay#(本月最后一天) <br />
如 #Year#-#Month#-#Day#(表示今天)
#Year#-#Month#-{#Day#+1}(表示明天) {#Year#+1}-#Month#-#Day#(表示明年的今天)<br />
<span class="STYLE1">注意:如果有运算的地方必须用{}括起来,如上面例子的{#Day#+1},必须用{}</span><br />
<span class="STYLE2">自定义函数:</span> #F{}表示函数,{}之间是函数的内容 例子见4.2-1<br />
<font color="#0000FF">示例 4.2-1(动态限制日期的范围 <strong>使用了自定义函数</strong> <font color="#FF0000">前面的日期不能大于后面的日期 后面的日期的最大值是:2020-1-1</font>):</font><br />
<input class="Wdate" id="<span class="STYLE2">htStart</span>" type="text" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" <font color="#FF0000">MAXDATE="#F{$('<span class="STYLE2">htEnd</span>').value}"</font>/><br />
<input class="Wdate" id="<span class="STYLE2">htEnd</span>" type="text" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" <font color="#FF0000">MINDATE="#F{$('<span class="STYLE2">htStart</span>').value}" MAXDATE="2020-1-1"</font>/><br />
合同有效期从
<input class="Wdate" type="text" id="htStart" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" maxdate="#F{$('htEnd').value}"/>
到
<input class="Wdate" type="text" id="htEnd" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" mindate="#F{$('htStart').value}" maxdate="2020-1-1"/>
<br />
<br />
<font color="#0000FF">示例 4.2-2(动态限制日期的范围 只能选择今天<font color="#FF0000">以前</font>的日期(包括今天))</font><br />
<input class="Wdate" id="text212" type="text" onfocus="new WdatePicker(this)" <font color="#FF0000">MAXDATE="#Year#-#Month#-#Day#"</font>/><br />
<input class="Wdate" type="text" id="text212" onfocus="new WdatePicker(this)" maxdate="#Year#-#Month#-#Day#"/>
</p>
<p><font color="#0000FF">示例 4.2-3(动态限制日期的范围 只能选择今天<font color="#FF0000">以后</font>的日期(不包括今天))</font><br />
<input class="Wdate" id="text213" type="text" onfocus="new WdatePicker(this)" <font color="#FF0000">MINDATE="#Year#-#Month#-{#Day#+1}"</font>/><br />
<input class="Wdate" type="text" id="text213" onfocus="new WdatePicker(this)" mindate="#Year#-#Month#-{#Day#+1}"/>
</p>
<p><font color="#0000FF">示例 4.2-4(动态限制日期的范围 只能选择本月的日期 1号至本月最后一天)</font><br />
<input class="Wdate" id="text213" type="text" onfocus="new WdatePicker(this)" <font color="#FF0000">MINDATE="#Year#-#Month#-1" <font color="#FF0000">MAXDATE="#Year#-#Month#-#lastDay#"</font></font>/><br />
<input class="Wdate" type="text" id="text2" onfocus="new WdatePicker(this)" mindate="#Year#-#Month#-1" maxdate="#Year#-#Month#-#lastDay#"/>
</p>
<p> </p>
<p><span class="title"><a name="m25" id="m25"></a><br />
5. 根据网页大小自动选择显示位置</span><br />
调用形式同示例1-1,点右下角的日期框就能看到效果<br />
</p>
<div align="right"> 示例5-1:
<input class="Wdate" type="text" onfocus="new WdatePicker(this)"/>
</div>
</p>
<p> </p>
<p><span class="title"><a name="m26" id="m26"></a><br />
6. 跨越框架显示选择框</span>(可无限跨越框架,无论你怎么嵌套框架都不必担心了)<br />
<iframe name=ccc src="demo_iframe.htm" frameborder="0" width="800px" height="250px"></iframe>
</p>
<p> </p>
<p><span class="title"><a name="m27" id="m27"></a><br />
7. 支持日期和时间的编辑,编辑时自动跳转到对应月份和时间</span><br />
<font color="#0000FF">不知道你是否已经注意到,当日期框里面有值时,右下角的按钮会变成<font color="#FF0000">确定</font>,现在你可以尝试对下面框中的日期和时间进行编辑<br />
</font>主调函数:onfocus="new WdatePicker(this)" <br />
示例5-1:
<input class="Wdate" type="text" onfocus="new WdatePicker(this)" value="2000-01-01"/>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -