Commit 8b5f31b8 authored by Huang's avatar Huang
Browse files

no commit message

parent d8b3ed74
<!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=gb2312" />
<meta name="keywords" content="日期控件 datepicker calendar 日历控件 javascript js日历控件 带时间 自定义格式 月历控件 日期时间 日期选择" />
<title>My97日期控件 功能演示 常规功能 My97 Datepicker Demo</title>
<link href="../../css/base.css" tppabs="http://www.my97.net/dp/css/base.css" rel="stylesheet" type="text/css" />
<link href="demo.css" tppabs="http://www.my97.net/dp/demo/resource/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<iframe src="../../head.asp" tppabs="http://www.my97.net/dp/head.asp" scrolling="no" frameborder="0" height="100px" width="100%"></iframe>
<script language="JavaScript" type="text/javascript" src="../../../WdatePicker.js" tppabs="http://www.my97.net/dp/My97DatePicker/WdatePicker.js"></script>
<div class="dCenter dBody">
<div id="content">
<h2><a href="main.asp" tppabs="http://www.my97.net/dp/demo/resource/main.asp"><strong>一. 简介</strong></a><a name="m2" id="m2"></a></h2>
<h2><a href="2.1.asp.htm" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp"><strong>二. 功能及示例</strong></a><a name="m2" id="m2"></a></h2>
<h2><a href="3.asp.htm" tppabs="http://www.my97.net/dp/demo/resource/3.asp">三. 配置说明</a><a name="m3" id="m3"></a></h2>
<h2>四. 如何使用<a name="m4" id="m4"></a></h2>
<p style="margin-left:20px">1. 在使用该日期控件的文件中加入JS库<span class="STYLE2">(仅这一个文件即可,其他文件会自动引入,请勿删除或改名)</span>, 代码如下 &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;datepicker/WdatePicker.js&quot;&gt;&lt;/script&gt;<br />
注:<span class="STYLE2">src=&quot;datepicker/WdatePicker.js&quot;</span> 请根据你的实际情况改变路径<br />
<br />
2. 加上主调函数 WdatePicker<br />
关于 WdatePicker 的用法:<span class="STYLE2"><br />
<br />
如果您是新手,对js还不是很了解的话</span><span class="STYLE1">一定要多看看这份文档</span><br />
基本上每一个演示的示例下面都有相关代码,并且 <span class="STYLE2">关键属性用蓝字标出</span>,<span class="STYLE1">关键值用红字标出</span> 应该很容易看明白 <br />
<br />
<span class="STYLE2">如果您有一定的水准<br />
</span>希望能从头到尾把功能介绍好好看一遍,这样大部分功能你都会用了<br />
<br />
<span class="STYLE2">如果您是高手</span><br />
建议您通读配置说明和内置函数</p>
<h2>五. 内置函数和属性<a name="m5" id="m5"></a></h2>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
<tr>
<th>函数名</th>
<th>返回值类型</th>
<th>作用域</th>
<th>参数</th>
<th>描述</th>
</tr>
<tr>
<td align="center">$dp.show</td>
<td align="center">void</td>
<td align="center">全局</td>
<td></td>
<td>显示日期选择框</td>
</tr>
<tr>
<td align="center">$dp.hide</td>
<td align="center">void</td>
<td align="center">全局</td>
<td></td>
<td>隐藏日期选择框</td>
</tr>
<tr>
<td align="center">$dp.$D</td>
<td align="center">String</td>
<td align="center">全局</td>
<td><span class="STYLE2">id [string]:</span> 对象的ID <br />
<span class="STYLE2">arg [object]:</span> 日期差量,可以设置成<br />
{y:[值],M:[值],d:[值],H:[值],m:[值],s:[值]}<br />
属性 y,M,d,H,m,s 分别代表 年月日时分秒<br />
{M:3,d:7} 表示 3个月零7天<br />
{d:1,H:1} 表示1天多1小时</td>
<td>将id对应的日期框中的日期字符串,加上定义的日期差量,返回使用real格式化后的日期串<br />
<span class="STYLE2">参考 示例 4-3-2</span></td>
</tr>
<tr>
<td align="center">$dp.$DV</td>
<td align="center">String</td>
<td align="center">全局</td>
<td><span class="STYLE2">v [string]:</span> 日期字符串<br />
<span class="STYLE2">arg [object]:</span> 同上例的arg </td>
<td>将传入的日期字符串,加上定义的日期差量,返回使用real格式化后的日期串<br />
<span class="STYLE2">参考 示例 4-3-3</span></td>
</tr>
<tr>
<td colspan="5">以下函数只在事件自定义函数中有效</td>
</tr>
<tr>
<td align="center">$dp.cal.getP</td>
<td align="center">String</td>
<td align="center">事件function</td>
<td><span class="STYLE2">p [string]:</span> 属性名称 yMdHmswWD分别代表年,月,日,时,分,秒,星期(0-6),周(1-52),星期(一-六) <br />
<span class="STYLE2">f [string]:</span> format 格式字符串<br />
设置方法参考 <span class="STYLE2">1.4 自定义格式</span></td>
<td>返回所指定属性被格式字符串格式化后的值[单属性],在changing,picking,clearing事件中返回<span class="STYLE1">选择前</span>的值<br />
<span class="STYLE2">参考 示例 1-2-2</span></td>
</tr>
<tr>
<td align="center">$dp.cal.getDateStr</td>
<td align="center">String </td>
<td align="center">事件function</td>
<td><span class="STYLE2">f [string]:</span> 格式字符串,为空时使用dateFmt<br /></td>
<td>返回所指定属性被格式字符串格式化后的值[整个值],在changing,picking,clearing事件中返回<span class="STYLE1">选择前</span>的值</td>
</tr>
<tr>
<td align="center"> $dp.cal.getNewP</td>
<td align="center">String</td>
<td align="center">事件function</td>
<td>用法同$dp.cal.getP</td>
<td>返回所指定属性被格式字符串格式化后的值[单属性],在changing,picking,clearing事件中返回<span class="STYLE1">选择后</span>的值</td>
</tr>
<tr>
<td align="center"> $dp.cal.getNewDateStr</td>
<td align="center">String</td>
<td align="center">事件function</td>
<td>用法同$dp.cal.getDateStr</td>
<td>返回所指定属性被格式字符串格式化后的值[整个值],在changing,picking,clearing事件中返回<span class="STYLE1">选择后</span>的值</td>
</tr>
</table>
<br />
<br />
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
<tr>
<th width="14%">属性名</th>
<th width="10%">返回值类型</th>
<th width="11%">作用域</th>
<th width="29%">参数</th>
<th width="36%">描述</th>
</tr>
<tr>
<td align="center"> $dp.cal.date</td>
<td align="center">object</td>
<td align="center">事件function</td>
<td>$dp.cal.date.y:返回 年<br />
$dp.cal.date.M:返回 月<br />
$dp.cal.date.d:返回 日<br />
$dp.cal.date.H:返回 时<br />
$dp.cal.date.m:返回 分<br />
$dp.cal.date.s:返回 秒 <br /></td>
<td>在changing,picking,clearing事件中返回<span class="STYLE1">选择前</span>的日期对象</td>
</tr>
<tr>
<td align="center"> $dp.cal.newdate</td>
<td align="center">object</td>
<td align="center">事件function</td>
<td>用法同$dp.cal.date</td>
<td>在changing,picking,clearing事件中返回<span class="STYLE1">选择后</span>的日期对象</td>
</tr>
</table>
<h2>六. 疑难解答<a name="m6" id="m6"></a></h2>
<p style="margin-left:20px">任何问题,请先参考 <a href="javascript:if(confirm('http://www.my97.net/dp/support.asp \n\n该文件未被 Teleport Pro 下载,因为 它位于起始地址以设置的边界以外的域或路径中。 \n\n你想要从服务器打开它吗?'))window.location='http://www.my97.net/dp/support.asp'" tppabs="http://www.my97.net/dp/support.asp" target="_top">技术支持</a> <br />
如果找不到答案,您可以直接在blog留言,或者通过下面的联系方式与我联系</p>
<h2>七. 联系My97<a name="m7" id="m7"></a></h2>
<p style="margin-left:20px"> * 如果您在使用过程中遇到问题,或者有更好的建议<br />
* 欢迎您访问<br />
* BLOG: <a href="javascript:if(confirm('http://my97.cnblogs.com/ \n\n该文件未被 Teleport Pro 下载,因为 它位于起始地址以设置的边界以外的域或路径中。 \n\n你想要从服务器打开它吗?'))window.location='http://my97.cnblogs.com/'" tppabs="http://my97.cnblogs.com/">http://my97.cnblogs.com</a><br />
* MAIL: support$my97.net($换成@)<br />
* 有问题在我blog留言或给我Email吧,<span class="STYLE1">最好先仔细看说明,很多问题都是因为没有仔细看说明导致的</span> </p>
<br />
<br />
</div>
<div style="clear:both"></div>
</div>
<div class="dCenter dBody" style="padding-left:72px">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-6343250634002651";
/* 底部 */
google_ad_slot = "0599809152";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript">
</script>
</div>
<div id="footer" class="dCenter">&copy; 2010 <a href="mailto:smallcarrot@163.com">My97</a> All Rights Reserved.&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F489957c212e14340592fb2e4921b2f1d' type='text/javascript'%3E%3C/script%3E"));
</script>&nbsp;&nbsp;&nbsp;&nbsp;浙ICP备11060275号
</div>
</body>
</html>
p,table {
font-weight:normal;
}
td {
padding:3px;
background-color:#ffffff;
}
th {
text-align:center;
padding:3px;
background-color:#ccc;
}
#content {
padding-left:50px;
padding-right:40px;
}
#content h2 {
font-size: 18px;
color: #1E9300;
padding-top:30px;
margin-bottom: 8px;
}
#content h2 a {
color: #1E9300;
}
#content h3 {
margin-top:24px;margin-bottom: 8px; FONT: bold 14px 宋体,tahoma,arial,sans-serif; COLOR:#0033CC;
}
#content h3 a {
color: #0033CC;
}
#content ul {
margin-left: 20px;
}
#content ol {
margin:16px 0px 8px 36px; FONT: bold 9pt 宋体,tahoma,arial,sans-serif;
}
#content ol li{
margin-top:16px;
}
#content div {
margin-top:20px;
margin-bottom:10px;
border:#333 solid 1px;
}
#content div h4 {
font-size:9pt;
padding:3px;
background:#EEE;
margin-bottom:5px;
}
#content div p {
padding:5px;
}
.STYLE1 {
color: #FF0000;
}
.STYLE2 {color: #0000FF}
\ No newline at end of file
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="日期控件 datepicker calendar 日历控件 javascript js日历控件 带时间 自定义格式 月历控件 日期时间 日期选择" />
<title>My97 DatePicker 4.0 演示-框架1</title>
<script language="javascript" type="text/javascript" src="../../../WdatePicker.js" tppabs="http://www.my97.net/dp/My97DatePicker/WdatePicker.js"></script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 22px;
top: 73px;
background-color: #0033FF;
}
#Layer2 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 459px;
top: 80px;
}
-->
</style>
</head>
<body bgcolor="#60FFAF">
<p>内嵌框架1:</p>
<p>格式为:yyyy-MM-dd HH:mm<br>
<input type="text" class="Wdate" id="test2" style="width:200px" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})" />
</p>
</p>
<select name="select">
<option>可以遮住DropDownList</option>
</select>
<p> </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="Layer2">
<iframe id='f22' src="demo_iframe2.htm" tppabs="http://www.my97.net/dp/demo/resource/demo_iframe2.htm" frameborder="0" width="300px" height="150px"></iframe>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="日期控件 datepicker calendar 日历控件 javascript js日历控件 带时间 自定义格式 月历控件 日期时间 日期选择" />
<title>My97 DatePicker 4.0 演示-框架2</title>
<script language="javascript" type="text/javascript" src="../../../WdatePicker.js" tppabs="http://www.my97.net/dp/My97DatePicker/WdatePicker.js"></script>
</head>
<body bgcolor="#C8E3FF">
<p>内嵌框架2:</p>
<p>
<input type="text" name="test" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy年MM月dd日',skin:'whyGreen'})"/>
</p>
<p>内嵌框架2:</p>
</body>
</html>
<!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=gb2312" />
<meta name="keywords" content="日期控件 datepicker calendar 日历控件 javascript js日历控件 带时间 自定义格式 月历控件 日期时间 日期选择" />
<title>My97 DatePicker 演示 - 目录导航</title>
<base target="mainFrm" />
<link href="../../css/base.css" tppabs="http://www.my97.net/dp/css/base.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a {
text-decoration: none;
color: #555;
}
-->
</style>
</head>
<body>
<DIV class=res-block style="text-align:left;margin:10px 5px 10px 10px">
<DIV class=res-block-inner>
<h3>My97DatePicker 演示和文档</h3>
<h3><a href="main.asp#m1" tppabs="http://www.my97.net/dp/demo/resource/main.asp#m1">一. 简介</a></h3>
<UL>
<LI><a href="main.asp#m11" tppabs="http://www.my97.net/dp/demo/resource/main.asp#m11">简介</a></LI>
<LI><a href="main.asp#m12" tppabs="http://www.my97.net/dp/demo/resource/main.asp#m12">注意事项</a></LI>
<LI><a href="main.asp#m13" tppabs="http://www.my97.net/dp/demo/resource/main.asp#m13">支持的浏览器</a></LI>
</UL>
<h3><a href="2.1.asp.htm#m2" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp#m2">二. 功能及示例</a></h3>
<ul>
<LI><a href="2.1.asp.htm#m21" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp#m21">常规功能</a>
<UL style="list-style-type:square">
<LI><a href="2.1.asp.htm#m211" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp#m211">支持多种调用模式</a></LI>
<LI><a href="2.1.asp.htm#m212" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp#m212">下拉,输入,导航选择日期</a></LI>
<LI><a href="2.1.asp.htm#m213" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp#m213">支持周显示</a></LI>
<LI><a href="2.1.asp.htm#m214" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp#m214">只读开关,高亮周末功能</a></LI>
<LI><a href="2.1.asp.htm#m215" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp#m215">操作按钮自定义</a></LI>
<li><a href="2.1.asp.htm#m216" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp#m216">自动选择显示位置</a></li>
<li><a href="2.1.asp.htm#m217" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp#m217">自定义弹出位置</a></li>
<li><a href="2.1.asp.htm#m218" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp#m218">自定义星期的第一天</a><font color="red">new</font></li>
</UL>
</LI>
<LI><a href="2.2.asp.htm#m22" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m22">特色功能</a>
<UL style="list-style-type:square">
<LI><a href="2.2.asp.htm#m221" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m221">平面显示</a></LI>
<LI><a href="2.2.asp.htm#m222" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m222">支持多种容器</a></LI>
<LI><a href="2.2.asp.htm#m223" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m223">起始日期功能</a></LI>
<LI><a href="2.2.asp.htm#m224" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m224">自定义格式</a><font color="red">new</font></LI>
<LI><a href="2.2.asp.htm#m225" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m225">双月日历功能</a><font color="red">new</font></LI>
<LI><a href="2.2.asp.htm#m226" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m226">自动纠错功能</a></LI>
<LI><a href="2.2.asp.htm#m227" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m227">跨无限级框架显示</a></LI>
<LI><a href="2.2.asp.htm#m228" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m228">民国年日历和其他特殊日历</a></LI>
<LI><a href="2.2.asp.htm#m229" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m229">编辑功能</a></LI>
<LI><a href="2.2.asp.htm#m22a" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m22a">为编程带来方便</a></LI>
<LI><a href="2.2.asp.htm#m22b" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m22b">其他属性</a></LI>
</UL>
</LI>
<LI><a href="2.3.asp.htm#m23" tppabs="http://www.my97.net/dp/demo/resource/2.3.asp#m23">多语言和自定义皮肤</a>
<UL style="list-style-type:square">
<LI><a href="2.3.asp.htm#m231" tppabs="http://www.my97.net/dp/demo/resource/2.3.asp#m231">多语言支持</a></LI>
<LI><a href="2.3.asp.htm#m232" tppabs="http://www.my97.net/dp/demo/resource/2.3.asp#m232">自定义和动态切换皮肤</a></LI>
</UL>
</LI>
<LI><a href="2.4.asp.htm#m24" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m24">日期范围限制</a>
<UL style="list-style-type:square">
<LI><a href="2.4.asp.htm#m241" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m241">静态限制</a></LI>
<LI><a href="2.4.asp.htm#m242" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m242">动态限制</a></LI>
<LI><a href="2.4.asp.htm#m243" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m243">脚本自定义限制</a></LI>
<LI><a href="2.4.asp.htm#m244" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m244">无效天</a></LI>
<LI><a href="2.4.asp.htm#m245" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m245">无效日期</a></LI>
<LI><a href="2.4.asp.htm#m246" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m246">有效日期</a></LI>
<LI><a href="2.4.asp.htm#m247" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m247">特殊天和特殊日期<font color="red">new</font></a></LI>
</UL>
</LI>
<LI><a href="2.5.asp.htm#m25" tppabs="http://www.my97.net/dp/demo/resource/2.5.asp#m25">自定义事件</a></LI>
<UL style="list-style-type:square"><li><a href="2.5.asp.htm#m251" tppabs="http://www.my97.net/dp/demo/resource/2.5.asp#m251">自定义事件</a></li>
<li><a href="2.5.asp.htm#m252" tppabs="http://www.my97.net/dp/demo/resource/2.5.asp#m252">onpicking和onpicked事件</a></li>
<li><a href="2.5.asp.htm#m253" tppabs="http://www.my97.net/dp/demo/resource/2.5.asp#m253">onclearing和oncleared事件</a></li>
<li><a href="2.5.asp.htm#m254" tppabs="http://www.my97.net/dp/demo/resource/2.5.asp#m254">changing和changed事件</a></li>
</ul>
<LI><a href="2.6.asp.htm#m26" tppabs="http://www.my97.net/dp/demo/resource/2.6.asp#m26">快速选择功能</a></LI>
</ul>
<h3><a href="3.asp.htm#m3" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m3">三. 配置说明</a></h3>
<ul>
<LI><a href="3.asp.htm#m31" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m31">属性配置</a>
<ul style="list-style-type:square">
<LI><a href="3.asp.htm#m311" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m311">属性表</a></LI>
<LI><a href="3.asp.htm#m312" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m312">配置全局默认值</a></LI>
<LI><a href="3.asp.htm#m313" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m313">配置单个控件</a></LI>
<LI><a href="3.asp.htm#m314" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m314">多套配置快速切换</a></LI>
</ul>
</LI>
<LI><a href="3.asp.htm#m32" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m32">语言配置
</a>
<ul style="list-style-type:square">
<LI><a href="3.asp.htm#m321" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m321">语言列表</a></LI>
<LI><a href="3.asp.htm#m322" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m322">语言安装说明</a></LI>
</ul>
</LI>
<LI style="list-style-type:square"><a href="3.asp.htm#m33" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m33">皮肤配置</a>
<ul>
<LI><a href="3.asp.htm#m331" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m331">皮肤列表</a></LI>
<LI><a href="3.asp.htm#m332" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m332">皮肤安装说明</a></LI>
</ul>
</LI>
</ul>
<h3><a href="999.asp.htm#m4" tppabs="http://www.my97.net/dp/demo/resource/999.asp#m4">四. 如何使用</a></h3>
<h3><a href="999.asp.htm#m5" tppabs="http://www.my97.net/dp/demo/resource/999.asp#m5">五. 内置函数和属性</a></h3>
<h3><a href="999.asp.htm#m6" tppabs="http://www.my97.net/dp/demo/resource/999.asp#m6">六. 疑难解答</a></h3>
<h3><a href="999.asp.htm#m7" tppabs="http://www.my97.net/dp/demo/resource/999.asp#m7">七. 联系My97</a></h3>
<br>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F489957c212e14340592fb2e4921b2f1d' type='text/javascript'%3E%3C/script%3E"));
</script>
</DIV>
<DIV class=res-block-bottom></DIV>
</DIV>
</body>
</html>
<!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=gb2312" />
<meta name="author" content="My97" />
<meta name="keywords" content="日期控件 datepicker calendar 日历控件 javascript js日历控件 带时间 自定义格式 月历控件 日期时间 日期选择" /><title>My97日期控件 功能演示 My97 Datepicker Demo</title>
<link href="../../css/base.css" rel="stylesheet" type="text/css" />
<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<iframe src="../../head.asp" scrolling="no" frameborder="0" height="100px" width="100%"></iframe>
<script language="JavaScript" type="text/javascript" src="../../../WdatePicker.js"></script>
<div class="dCenter dBody">
<div id="content">
<h2>一. 简介<a name="m1" id="m1"></a></h2>
<h3>1. 简介<a name="m11" id="m11"></a></h3>
<p>目前的版本是:4.8</p>
<h3>2. 注意事项<a name="m12" id="m12"></a></h3>
<ul>
<li>My97DatePicker目录是一个整体,<span class="STYLE1">不可破坏里面的目录结构</span>,也不可对里面的文件改名,可以改目录名</li>
<li>My97DatePicker.htm是必须文件,<span class="STYLE1">不可删除(4.8以后不存在此文件)</span></li>
<li>各目录及文件的用途: <br />
<span class="STYLE2">WdatePicker.js</span> 配置文件,<span class="STYLE1">在调用的地方仅需使用该文件</span>,可多个共存,以xx_WdatePicker.js方式命名<br />
<span class="STYLE2">config.js</span> 语言和皮肤配置文件,<span class="STYLE1">无需引入(4.8以后合并入WdatePicker.js)</span><br />
<span class="STYLE2">calendar.js</span> 日期库主文件,<span class="STYLE1">无需引入</span><br />
<span class="STYLE2">My97DatePicker.htm</span> 临时页面文件,不可删除<span class="STYLE1">(4.8以后不存在此文件)</span><br />
<span class="STYLE2">目录lang</span> 存放语言文件,你可以根据需要清理或添加语言文件<br />
<span class="STYLE2">目录skin </span>存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包</li>
<li>当WdatePicker.js里的属性:$wdate=true时,在input里加上class=&quot;Wdate&quot;就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class=&quot;Wdate&quot;去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式</li>
</ul>
<h3>3. 支持的浏览器<a name="m13" id="m13"></a></h3>
<p>IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+<br />
</p>
<p>&nbsp; </p>
<p>注意:IE 8.0是完美支持的,如果你在IE8上使用遇到问题,请与我取得联系,<span class="STYLE1">务必附上能再现你的问题的<strong>纯HTML</strong>代码包</span></p>
<h2><a href="2.1.asp"><strong>二. 功能及示例</strong></a><a name="m2" id="m2"></a></h2>
<h2><a href="3.asp">三. 配置说明</a><a name="m3" id="m3"></a></h2>
<h2><a href="999.asp">四. 如何使用</a><a name="m4" id="m4"></a></h2>
<br />
<br />
</div>
<div style="clear:both"></div>
</div>
<div class="dCenter dBody" style="padding-left:72px">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-6343250634002651";
/* 底部 */
google_ad_slot = "0599809152";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="footer" class="dCenter">&copy; 2010 <a href="mailto:smallcarrot@163.com">My97</a> All Rights Reserved.&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F489957c212e14340592fb2e4921b2f1d' type='text/javascript'%3E%3C/script%3E"));
</script>&nbsp;&nbsp;&nbsp;&nbsp;浙ICP备11060275号
</div>
</body>
</html>
var $lang={
errAlertMsg: "Invalid date or the date out of range,redo or not?",
aWeekStr: ["wk", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
aLongWeekStr:["wk","Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
aMonStr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
aLongMonStr: ["January","February","March","April","May","June","July","August","September","October","November","December"],
clearStr: "Clear",
todayStr: "Today",
okStr: "OK",
updateStr: "OK",
timeStr: "Time",
quickStr: "Quick Selection",
err_1: 'MinDate Cannot be bigger than MaxDate!'
}
\ No newline at end of file
var $lang={
errAlertMsg: "\u4E0D\u5408\u6CD5\u7684\u65E5\u671F\u683C\u5F0F\u6216\u8005\u65E5\u671F\u8D85\u51FA\u9650\u5B9A\u8303\u56F4,\u9700\u8981\u64A4\u9500\u5417?",
aWeekStr: ["\u5468","\u65E5","\u4E00","\u4E8C","\u4E09","\u56DB","\u4E94","\u516D"],
aLongWeekStr:["\u5468","\u661F\u671F\u65E5","\u661F\u671F\u4E00","\u661F\u671F\u4E8C","\u661F\u671F\u4E09","\u661F\u671F\u56DB","\u661F\u671F\u4E94","\u661F\u671F\u516D"],
aMonStr: ["\u4E00\u6708","\u4E8C\u6708","\u4E09\u6708","\u56DB\u6708","\u4E94\u6708","\u516D\u6708","\u4E03\u6708","\u516B\u6708","\u4E5D\u6708","\u5341\u6708","\u5341\u4E00","\u5341\u4E8C"],
aLongMonStr: ["\u4E00\u6708","\u4E8C\u6708","\u4E09\u6708","\u56DB\u6708","\u4E94\u6708","\u516D\u6708","\u4E03\u6708","\u516B\u6708","\u4E5D\u6708","\u5341\u6708","\u5341\u4E00\u6708","\u5341\u4E8C\u6708"],
clearStr: "\u6E05\u7A7A",
todayStr: "\u4ECA\u5929",
okStr: "\u786E\u5B9A",
updateStr: "\u786E\u5B9A",
timeStr: "\u65F6\u95F4",
quickStr: "\u5FEB\u901F\u9009\u62E9",
err_1: '\u6700\u5C0F\u65E5\u671F\u4E0D\u80FD\u5927\u4E8E\u6700\u5927\u65E5\u671F!'
}
\ No newline at end of file
var $lang={
errAlertMsg: "\u4E0D\u5408\u6CD5\u7684\u65E5\u671F\u683C\u5F0F\u6216\u8005\u65E5\u671F\u8D85\u51FA\u9650\u5B9A\u7BC4\u570D,\u9700\u8981\u64A4\u92B7\u55CE?",
aWeekStr: ["\u5468","\u65E5","\u4E00","\u4E8C","\u4E09","\u56DB","\u4E94","\u516D"],
aLongWeekStr:["\u5468","\u661F\u671F\u65E5","\u661F\u671F\u4E00","\u661F\u671F\u4E8C","\u661F\u671F\u4E09","\u661F\u671F\u56DB","\u661F\u671F\u4E94","\u661F\u671F\u516D"],
aMonStr: ["\u4E00\u6708","\u4E8C\u6708","\u4E09\u6708","\u56DB\u6708","\u4E94\u6708","\u516D\u6708","\u4E03\u6708","\u516B\u6708","\u4E5D\u6708","\u5341\u6708","\u5341\u4E00","\u5341\u4E8C"],
aLongMonStr: ["\u4E00\u6708","\u4E8C\u6708","\u4E09\u6708","\u56DB\u6708","\u4E94\u6708","\u516D\u6708","\u4E03\u6708","\u516B\u6708","\u4E5D\u6708","\u5341\u6708","\u5341\u4E00\u6708","\u5341\u4E8C\u6708"],
clearStr: "\u6E05\u7A7A",
todayStr: "\u4ECA\u5929",
okStr: "\u78BA\u5B9A",
updateStr: "\u78BA\u5B9A",
timeStr: "\u6642\u9593",
quickStr: "\u5FEB\u901F\u9078\u64C7",
err_1: '\u6700\u5C0F\u65E5\u671F\u4E0D\u80FD\u5927\u65BC\u6700\u5927\u65E5\u671F!'
}
\ No newline at end of file
.Wdate{border:#999 1px solid;height:20px;background:#fff url(datePicker.gif) no-repeat right;}
.WdateFmtErr{font-weight:bold;color:red;}
\ No newline at end of file
/*
* My97 DatePicker 4.7
*/
.WdateDiv{
width:180px;
background-color:#FFFFFF;
border:#bbb 1px solid;
padding:2px;
}
.WdateDiv2{
width:360px;
}
.WdateDiv *{font-size:9pt;}
.WdateDiv .NavImg a{
display:block;
cursor:pointer;
height:16px;
width:16px;
}
.WdateDiv .NavImgll a{
float:left;
background:transparent url(img.gif) no-repeat scroll 0 0;
}
.WdateDiv .NavImgl a{
float:left;
background:transparent url(img.gif) no-repeat scroll -16px 0;
}
.WdateDiv .NavImgr a{
float:right;
background:transparent url(img.gif) no-repeat scroll -32px 0;
}
.WdateDiv .NavImgrr a{
float:right;
background:transparent url(img.gif) no-repeat scroll -48px 0;
}
.WdateDiv #dpTitle{
height:24px;
margin-bottom:2px;
padding:1px;
}
.WdateDiv .yminput{
margin-top:2px;
text-align:center;
height:20px;
border:0px;
width:50px;
cursor:pointer;
}
.WdateDiv .yminputfocus{
margin-top:2px;
text-align:center;
font-weight:bold;
height:20px;
color:blue;
border:#ccc 1px solid;
width:50px;
}
.WdateDiv .menuSel{
z-index:1;
position:absolute;
background-color:#FFFFFF;
border:#ccc 1px solid;
display:none;
}
.WdateDiv .menu{
cursor:pointer;
background-color:#fff;
}
.WdateDiv .menuOn{
cursor:pointer;
background-color:#BEEBEE;
}
.WdateDiv .invalidMenu{
color:#aaa;
}
.WdateDiv .YMenu{
margin-top:20px;
}
.WdateDiv .MMenu{
margin-top:20px;
*width:62px;
}
.WdateDiv .hhMenu{
margin-top:-90px;
margin-left:26px;
}
.WdateDiv .mmMenu{
margin-top:-46px;
margin-left:26px;
}
.WdateDiv .ssMenu{
margin-top:-24px;
margin-left:26px;
}
.WdateDiv .Wweek {
text-align:center;
background:#DAF3F5;
border-right:#BDEBEE 1px solid;
}
.WdateDiv .MTitle{
background-color:#BDEBEE;
}
.WdateDiv .WdayTable2{
border-collapse:collapse;
border:#c5d9e8 1px solid;
}
.WdateDiv .WdayTable2 table{
border:0;
}
.WdateDiv .WdayTable{
line-height:20px;
border:#c5d9e8 1px solid;
}
.WdateDiv .WdayTable td{
text-align:center;
}
.WdateDiv .Wday{
cursor:pointer;
}
.WdateDiv .WdayOn{
cursor:pointer;
background-color:#C0EBEF;
}
.WdateDiv .Wwday{
cursor:pointer;
color:#FF2F2F;
}
.WdateDiv .WwdayOn{
cursor:pointer;
color:#000;
background-color:#C0EBEF;
}
.WdateDiv .Wtoday{
cursor:pointer;
color:blue;
}
.WdateDiv .Wselday{
background-color:#A9E4E9;
}
.WdateDiv .WspecialDay{
background-color:#66F4DF;
}
.WdateDiv .WotherDay{
cursor:pointer;
color:#6A6AFF;
}
.WdateDiv .WotherDayOn{
cursor:pointer;
background-color:#C0EBEF;
}
.WdateDiv .WinvalidDay{
color:#aaa;
}
.WdateDiv #dpTime{
float:left;
margin-top:3px;
margin-right:30px;
}
.WdateDiv #dpTime #dpTimeStr{
margin-left:1px;
}
.WdateDiv #dpTime input{
width:18px;
height:20px;
text-align:center;
border:#ccc 1px solid;
}
.WdateDiv #dpTime .tB{
border-right:0px;
}
.WdateDiv #dpTime .tE{
border-left:0;
border-right:0;
}
.WdateDiv #dpTime .tm{
width:7px;
border-left:0;
border-right:0;
}
.WdateDiv #dpTime #dpTimeUp{
height:10px;
width:13px;
border:0px;
background:url(img.gif) no-repeat -32px -16px;
}
.WdateDiv #dpTime #dpTimeDown{
height:10px;
width:13px;
border:0px;
background:url(img.gif) no-repeat -48px -16px;
}
.WdateDiv #dpQS {
float:left;
margin-right:3px;
margin-top:3px;
background:url(img.gif) no-repeat 0px -16px;
width:20px;
height:20px;
cursor:pointer;
}
.WdateDiv #dpControl {
text-align:right;
}
.WdateDiv .dpButton{
height:20px;
width:45px;
border:#ccc 1px solid;
margin-top:2px;
margin-right:1px;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment