baf4fe01c4c5e1993792e15b12b07f06cabed1a9.svn-base
10.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!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 name="m2" id="m2"></a></h2>
<h3>1. 常规功能<a name="m21" id="m21"></a></h3>
<ol>
<li>支持多种调用模式 <a name="m211" id="m211"></a>
<p>除了支持常规在input单击或获得焦点调用外,还支持使用其他的元素如:<img><div>等触发WdatePicker函数来调用弹出日期框</p>
<div>
<h4>示例1-1-1 常规调用</h4>
<p>
<input type="text" id="d11" onClick="WdatePicker()"/>
<br />
<input id="d11" type="text" <span class="STYLE1">onClick="WdatePicker()"</span>/></p>
</div>
<div>
<h4>示例1-1-2 图标触发</h4>
<p>
<input id="d12" type="text"/>
<img src="../../../skin/datePicker.gif" tppabs="http://www.my97.net/dp/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" onClick="WdatePicker({el:'d12'})" /> <br />
<input id="<span class="STYLE1">d12</span>" type="text"/><br />
<img onclick="WdatePicker({<span class="STYLE2">el:</span><span class="STYLE1">'d12'</span>})" src="../skin/datePicker.gif" width="16" height="22" align="absmiddle"><br />
<span class="STYLE1">注意:</span>只需要传入控件的id即可</p>
</div>
</li>
<li>下拉,输入,导航选择日期<a name="m212" id="m212"></a>
<p>年月时分秒输入框都具备以下三种特性 <br />
1.
通过导航图标选择<br />
<img src="pic1.jpg" tppabs="http://www.my97.net/dp/demo/resource/pic1.jpg" width="180" height="197" /><br />
<br />
2. 直接使用键盘输入数字<br />
<img src="pic2.jpg" tppabs="http://www.my97.net/dp/demo/resource/pic2.jpg" width="180" height="197" /><br />
<br />
3. 直接从弹出的下拉框中选择<br />
<img src="pic3.jpg" tppabs="http://www.my97.net/dp/demo/resource/pic3.jpg" width="180" height="197" /><br />
<br />
<span class="STYLE2">另:年份输入框有智能提示功能,当用户连续点击同一个导航按钮5次时,会自动弹出年份下拉框</span></p>
</li>
<li>支持周显示 <a name="m213" id="m213"></a>
<p>可以通过配置isShowWeek属性决定是否限制周,并且在返回日期的时候还可以通过自带的自定义事件和API函数返回选择的周</p>
<br />
<div>
<h4>示例1-2-1 周显示简单应用 </h4>
<p>
<input id="d121" type="text" onfocus="WdatePicker({isShowWeek:true})"/>
<br />
<input id="d121" type="text" onfocus="WdatePicker({<span class="STYLE2">isShowWeek:</span><span class="STYLE1">true</span>})"/><br />
<br />
<span class="STYLE1">注意:周算法参考的是ISO8601定义的方法,如果您对此有疑问,请详见:</span><a href="javascript:if(confirm('http://en.wikipedia.org/wiki/ISO_week_date \n\n该文件未被 Teleport Pro 下载，因为 它位于起始地址以设置的边界以外的域或路径中。 \n\n你想要从服务器打开它吗?'))window.location='http://en.wikipedia.org/wiki/ISO_week_date'" tppabs="http://en.wikipedia.org/wiki/ISO_week_date" target="_blank">http://en.wikipedia.org/wiki/ISO_week_date</a><br />
<br />
周算法选择<span class="STYLE1">(4.8新增)</span><br />
相关属性:<span class="STYLE2">weekMethod</span><br />
周算法不同的地方有一些差异<br />
常见算法有两种<br />
1. ISO8601:规定第一个星期四为第一周,默认值<br />
2. MSExcel:1月1日所在的周</p>
</div>
<div>
<h4>示例1-2-2 利用onpicked事件把周赋值给另外的文本框</h4>
<p>
<input type="text" class="Wdate" id="d122" onFocus="WdatePicker({isShowWeek:true,onpicked:function(){$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>
您选择了第
<input type="text" id="d122_1" size="3"/>
(W格式)周, 另外您可以使用WW格式:
<input type="text" id="d122_2" size="3"/>
周 <br />
<input type="text" class="Wdate" id="d122" onFocus="WdatePicker({<span class="STYLE2">isShowWeek:</span><span class="STYLE1">true</span>,<span class="STYLE2">onpicked:</span><span class="STYLE1">function() {$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}</span>})"/><br />
<br />
onpicked 用法详见<a href="2.5.asp.htm#m251" tppabs="http://www.my97.net/dp/demo/resource/2.5.asp#m251">自定义事件</a><br />
$dp.cal.getP 用法详见<a href="999.asp.htm#m5" tppabs="http://www.my97.net/dp/demo/resource/999.asp#m5">内置函数和属性</a><br />
</p>
</div>
</li>
<li>只读开关,高亮周末功能 <a name="m214" id="m214"></a>
<p>设置readOnly属性 true 或 false 可指定日期框是否只读 <br />
设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末 </p>
</li>
<li>操作按钮自定义 <a name="m215" id="m215"></a>
<p>清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true</p>
<div>
<h4>示例1-5 禁用清空功能</h4>
<p> 最好把readOnly置为true,否则即使隐藏了清空按钮,用户依然可以在输入框里把值delete掉<br />
<input class="Wdate" type="text" id="d15" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>
<br />
<input class="Wdate" type="text" id="d15" onFocus="WdatePicker({<span class="STYLE2">isShowClear:</span><span class="STYLE1">false</span>,<span class="STYLE2">readOnly:</span><span class="STYLE1">true</span>})"/></p>
</div>
</li>
<li>自动选择显示位置<a name="m216" id="m216"></a>
<p>当控件处在页面边界时,它会自动选择显示的位置,所以没有必要担心弹出框会被页面边界遮住的问题了.</p>
</li>
<li>自定义弹出位置 <a name="m217" id="m217"></a>
<p>当控件处在页面边界时,它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.</p>
<br />
<div>
<h4>示例1-6 通过position属性,自定义弹出位置</h4>
<p>使用positon属性指定,弹出日期的坐标为{left:100,top:50}<br />
<input class="Wdate" type="text" id="d16" onfocus="WdatePicker({position:{left:100,top:50}})"/>
<br />
<input class="Wdate" type="text" id="d16" onfocus="WdatePicker({<span class="STYLE2">position:</span><span class="STYLE1">{left:100,top:50}</span>})"/><br />
<br />
position属性的详细用法详见<a href="3.asp.htm#m31" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m31">属性表</a></p>
</div>
</li>
<li>自定义星期的第一天<span class="STYLE1">(4.6新增)</span><a name="m218" id="m218"></a>
<p>各个国家的习惯不同,有些喜欢以星期日作为第一天,有些以星期一作为第一天.<br />
相关属性:<span class="STYLE2">firstDayOfWeek</span>: 可设置 0 - 6 的任意一个数字,0:星期日 1:星期一 以此类推</p>
<div>
<h4>示例1-7 以星期一作为第一天</h4>
<p>
<input class="Wdate" type="text" id="d17" onfocus="WdatePicker({firstDayOfWeek:1})"/>
<br />
<input class="Wdate" type="text" id="d17" onfocus="WdatePicker({<span class="STYLE2">firstDayOfWeek:</span><span class="STYLE1">1</span>})"/><br />
</p>
</div>
</li>
</ol>
<h3><a href="2.2.asp.htm" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp">2. 特色功能</a> <a name="m22" id="m22"></a></h3>
<h3><a href="2.3.asp.htm" tppabs="http://www.my97.net/dp/demo/resource/2.3.asp">3. 多语言和自定义皮肤</a><a name="m23" id="m23"></a></h3>
<h3><a href="2.4.asp.htm" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp">4. 日期范围限制</a><a name="m24" id="m24"></a></h3>
<h3><a href="2.5.asp.htm" tppabs="http://www.my97.net/dp/demo/resource/2.5.asp">5. 自定义事件</a><a name="m25" id="m25"></a></h3>
<h3><a href="2.6.asp.htm" tppabs="http://www.my97.net/dp/demo/resource/2.6.asp">6. 快速选择功能</a> <a name="m26" id="m26"></a></h3>
<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 href="999.asp.htm" tppabs="http://www.my97.net/dp/demo/resource/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">
</script>
</div>
<div id="footer" class="dCenter">© 2010 <a href="mailto:smallcarrot@163.com">My97</a> All Rights Reserved. <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> 浙ICP备11060275号
</div>
</body>
</html>