|
<!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>5. ×Ô¶¨Òåʼþ<a name="m25" id="m25"></a></h3>
|
<ol>
|
<li>×Ô¶¨Òåʼþ
|
<a name="m251" id="m251"></a>
|
<p>Èç¹ûÄãÐèÒª×öһЩ¸½¼ÓµÄ²Ù×÷,ÄãÒ²²»±Øµ£ÐÄ,ÈÕÆÚ¿Ø¼þ×Ô´øµÄ×Ô¶¨Òåʼþ¿ÉÒÔÂú×ãÄãµÄÐèÇó.´ËÍâ,Ä㻹¿ÉÒÔÔÚ×Ô¶¨ÒåʼþÖе÷ÓÃÌṩµÄAPI¿âÀ´×ö¸ü¶àµÄÔËËãºÍÀ©Õ¹,¾ø¶Ô¿ÉÒÔͨ¹ýºÜÉٵĴúÂëÂú×ãÄã¼°Æä¸öÐÔ»¯µÄÐèÇó.<br />
|
<br />
|
×¢ÒâÏÂÃæ¼¸¸öÖØÒªµÄÖ¸Õë,½«¶ÔÄãµÄ±à³Ì´øÀ´ºÜ¶à±ãÀû<br />
|
<span class="STYLE1">this: Ö¸ÏòÎı¾¿ò<br />
|
dp: Ö¸Ïò$dp<br />
|
dp.cal: Ö¸ÏòÈÕÆÚ¿Ø¼þ¶ÔÏó</span><br />
|
×¢Òâ:º¯ÊýÔÐͱØÐëʹÓÃÀàËÆ <span class="STYLE1">function(dp){} </span>µÄģʽ,ÕâÑù×Ó,ÔÚº¯ÊýÄÚ²¿²Å¿ÉÒÔʹÓÃdp</p>
|
</li>
|
<li>onpicking ºÍ onpicked ʼþ
|
<a name="m252" id="m252"></a>
|
<div>
|
<h4>ʾÀý5-2-1 onpickingʼþÑÝʾ</h4>
|
<p>
|
<input type="text" id="5421" onFocus="WdatePicker({onpicking:function(dp){if(!confirm('ÈÕÆÚ¿òÔÀ´µÄֵΪ: '+dp.cal.getDateStr()+', ÒªÓÃÐÂÑ¡ÔñµÄÖµ:' + dp.cal.getNewDateStr() + '¸²¸ÇÂð?')) return true;}})" class="Wdate"/>
|
<br />
|
<input type="text" id="5421" onFocus="WdatePicker({<span class="STYLE2">onpicking:</span><span class="STYLE1">function(dp){if(!confirm('ÈÕÆÚ¿òÔÀ´µÄֵΪ: '+dp.cal.getDateStr()+', ÒªÓÃÐÂÑ¡ÔñµÄÖµ:' + dp.cal.getNewDateStr() + '¸²¸ÇÂð?')) return true;}</span>})" class="Wdate"/><br />
|
<br />
|
<span class="STYLE1">×¢Òâ:</span>Äã×¢Òâµ½dp.cal.getDateStrºÍdp.cal.getNewDateStrµÄÓ÷¨ÁËÂï? Ïê¼û<a href="999.asp-.htm#m5" tppabs="http://www.my97.net/dp/demo/resource/999.asp?#m5">ÄÚÖú¯ÊýºÍÊôÐÔ</a></p>
|
</div>
|
<div>
|
<h4>ʾÀý5-2-2 ʹÓÃonpickedʵÏÖÈÕÆÚÑ¡ÔñÁª¶¯</h4>
|
<p>Ñ¡ÔñµÚÒ»¸öÈÕÆÚµÄʱºò,µÚ¶þ¸öÈÕÆÚÑ¡Ôñ¿ò×Ô¶¯µ¯³ö<br />
|
ÈÕÆÚ´Ó:
|
<input id="d5221" class="Wdate" type="text" onFocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})"/>
|
ÖÁ
|
<input id="d5222" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})"/>
|
<br />
|
<span class="STYLE1">×¢Òâ:</span>ÏÂÃæµÚÒ»¸ö¿Ø¼þ´úÂëµÄд·¨<br />
|
<input id="<span class="STYLE1">d5221</span>" class="Wdate" type="text" onFocus="var d5222=$dp.$('d5222');WdatePicker({<span class="STYLE2">onpicked:</span><span class="STYLE1">function(){d5222.focus();}</span>,maxDate:'#F{$dp.$D(\'d5222\')}'})"/><br />
|
ÖÁ<br />
|
<input id="<span class="STYLE1">d5222</span>" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})"/><br />
|
<br />
|
<span class="STYLE1">×¢Òâ:</span>$dp.$ÊÇÒ»¸ö<a href="999.asp-.htm#m5" tppabs="http://www.my97.net/dp/demo/resource/999.asp?#m5">ÄÚÖú¯Êý</a>,Ï൱ÓÚdocument.getElementById</p>
|
</div>
|
<div>
|
<h4>ʾÀý5-2-3 ½«Ñ¡ÔñµÄÖµ²ð·Öµ½Îı¾¿ò </h4>
|
<p>
|
<input type="text" id="d523_y" size="5"/>
|
Äê
|
<input type="text" id="d523_M" size="3"/>
|
ÔÂ
|
<input type="text" id="d523_d" size="3"/>
|
ÈÕ
|
<input type="text" id="d523_HH" size="3"/>
|
ʱ
|
<input type="text" id="d523_mm" size="3"/>
|
·Ö
|
<input type="text" id="d523_ss" size="3"/>
|
Ãë
|
<input type="text" id="d523"/>
|
<img onclick="WdatePicker({el:'d523',dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:pickedFunc})" src="../../../skin/datePicker.gif" tppabs="http://www.my97.net/dp/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer"/>
|
<script>
|
function pickedFunc(){
|
$dp.$('d523_y').value=$dp.cal.getP('y');
|
$dp.$('d523_M').value=$dp.cal.getP('M');
|
$dp.$('d523_d').value=$dp.cal.getP('d');
|
$dp.$('d523_HH').value=$dp.cal.getP('H');
|
$dp.$('d523_mm').value=$dp.cal.getP('m');
|
$dp.$('d523_ss').value=$dp.cal.getP('s');
|
}
|
</script>
|
<br />
|
<input type="text" id="d523_y" size="5"/>
|
Äê<br />
|
<input type="text" id="d523_M" size="3"/>
|
ÔÂ<br />
|
<input type="text" id="d523_d" size="3"/>
|
ÈÕ<br />
|
<input type="text" id="d523_HH" size="3"/>
|
ʱ<br />
|
<input type="text" id="d523_mm" size="3"/>
|
·Ö<br />
|
<input type="text" id="d523_ss" size="3"/>
|
Ãë <br />
|
<img onclick="WdatePicker({<span class="STYLE2">el:</span><span class="STYLE1">'d523'</span>,dateFmt:'yyyy-MM-dd HH:mm:ss',<span class="STYLE2">onpicked:</span><span class="STYLE1">pickedFunc</span>})" src="../../../skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer"/><br />
|
<span class="STYLE1"><script></span><br />
|
<span class="STYLE2">function</span> pickedFunc(){<br />
|
$dp.$('d523_y').value=$dp.cal.getP('y');<br />
|
$dp.$('d523_M').value=$dp.cal.getP('M');<br />
|
$dp.$('d523_d').value=$dp.cal.getP('d');<br />
|
$dp.$('d523_HH').value=$dp.cal.getP('H');<br />
|
$dp.$('d523_mm').value=$dp.cal.getP('m');<br />
|
$dp.$('d523_ss').value=$dp.cal.getP('s');<br />
|
}<br />
|
<span class="STYLE1"></script></span><br />
|
<br />
|
<span class="STYLE1">×¢Òâ:</span>el:'d523'ÖÐ,Èç¹ûÄã²»ÐèÒªd523Õâ¸ö¿ò,Äã¿ÉÒÔ°ÑËû¸Ä³Éhidden,µ«ÊÇelÊôÐÔ±ØÐëÖ¸¶¨<br />
|
$dp.$ºÍ$dp.cal.getP¶¼ÊÇ<a href="999.asp-.htm#m5" tppabs="http://www.my97.net/dp/demo/resource/999.asp?#m5">ÄÚÖú¯Êý</a> </p>
|
</div>
|
</li>
|
<li>onclearing ºÍ oncleared ʼþ
|
<a name="m253" id="m253"></a>
|
<div>
|
<h4>ʾÀý5-3-1 ʹÓÃonclearingʼþÈ¡ÏûÇå¿Õ²Ù×÷</h4>
|
<p>
|
<input type="text" class="Wdate" id="d531" onFocus="WdatePicker({onclearing:function(){if(!confirm('ÈÕÆÚ¿òµÄֵΪ:'+this.value+', ȷʵҪÇå¿ÕÂð?'))return true;}})"/>
|
<br />
|
<input type="text" class="Wdate" id="d531" onFocus="WdatePicker({<span class="STYLE2">onclearing:</span><span class="STYLE1">function(){if(!confirm('ÈÕÆÚ¿òµÄֵΪ:'+this.value+', ȷʵҪÇå¿ÕÂð?'))return true;}</span>})"/><br />
|
<br />
|
<span class="STYLE1">×¢Òâ:</span>µ±onclearingº¯Êý·µ»Øtrueʱ,ϵͳµÄÇå¿Õʼþ½«±»È¡Ïû,<br />
|
º¯ÊýÌåÀïÃæÃ»ÓÐÒýÓÃ$dp,ËùÒÔº¯ÊýÔÐÍÀïÃæ¿ÉÒÔÊ¡ÂÔ²ÎÊýdp </p>
|
</div>
|
<div>
|
<h4>ʾÀý5-3-2 ʹÓÃcal¶ÔÏóÈ¡µÃµ±Ç°ÈÕÆÚËùÑ¡ÔñµÄÔ·Ý(ʹÓÃÁË dp.cal)</h4>
|
<p>
|
<input type="text" class="Wdate" id="d532" onFocus="WdatePicker({oncleared:function(dp){alert('µ±Ç°ÈÕÆÚËùÑ¡ÔñµÄÔ·ÝΪ:'+dp.cal.date.M);}})"/>
|
<br />
|
<input type="text" class="Wdate" id="d532" onFocus="WdatePicker({<span class="STYLE2">oncleared:</span><span class="STYLE1">function(dp){alert('µ±Ç°ÈÕÆÚËùÑ¡ÔñµÄÔ·ÝΪ:'+dp.cal.date.M);}</span>})"/></p>
|
</div>
|
<div>
|
<h4>ʾÀý5-3-3 ×ÛºÏʹÓÃÁ½¸öʼþ</h4>
|
<p>
|
<input type="text" class="Wdate" id="d533" onFocus="d533_focus(this)" value="2000-04-09"/>
|
<script>
|
function d533_focus(element){
|
var clearingFunc = function(){ if(!confirm('ÈÕÆÚ¿òµÄֵΪ:'+this.value+', ȷʵҪÇå¿ÕÂð?')) return true; }
|
var clearedFunc = function(){ alert('ÈÕÆÚ¿òÒѱ»Çå¿Õ'); }
|
WdatePicker({el:element,onclearing:clearingFunc,oncleared:clearedFunc})
|
}
|
</script>
|
<br />
|
<span class="STYLE1"><script></span><br />
|
<span class="STYLE2">function</span> d533_focus(element){<br />
|
var clearingFunc = function(){
|
if(!confirm('ÈÕÆÚ¿òµÄֵΪ:'+this.value+', ȷʵҪÇå¿ÕÂð?')) return true;
|
}<br />
|
var clearedFunc = function(){
|
alert('ÈÕÆÚ¿òÒѱ»Çå¿Õ');
|
}<br />
|
WdatePicker({el:element,onclearing:clearingFunc,oncleared:clearedFunc})<br />
|
}<br />
|
<span class="STYLE1"></script></span><br />
|
<input type="text" class="Wdate" id="d533" onFocus="<span class="STYLE1">d533_focus(this)</span>"/></p>
|
</div>
|
</li>
|
<li>ÄêÔÂÈÕʱ·ÖÃëµÄ changingºÍchanged <a name="m254" id="m254"></a> <p>ÄêÔÂÈÕʱ·ÖÃë¶¼ÓжÔÓ¦µÄchangingºÍchangedʼþ,·Ö±ðÊÇ:<br />
|
ychanging ychanged <br />
|
Mchanging Mchanged<br />
|
dchanging dchanged<br />
|
Hchanging Hchanged<br />
|
mchanging mchanged<br />
|
schanging schanged <br />
|
</p>
|
<div>
|
<h4>ʾÀý5-4-1 ÄêÔÂÈոıäʱµ¯³öÐÅÏ¢</h4>
|
<p>
|
<input type="text" class="Wdate" id="d" onFocus="WdatePicker({dchanging:cDayFunc,Mchanging:cMonthFunc,ychanging:cYearFunc,dchanged:cDayFunc,Mchanged:cMonthFunc,ychanged:cYearFunc})"/>
|
<script>
|
function cDayFunc(){
|
cFunc('d');
|
}
|
function cMonthFunc(){
|
cFunc('M');
|
}
|
function cYearFunc(){
|
cFunc('y');
|
}
|
function cFunc(who){
|
var str,p,c = $dp.cal;
|
if(who=='y'){
|
str='Äê·Ý';
|
p='y';
|
}
|
else if(who=='M'){
|
str='Ô·Ý';
|
p='M';
|
}
|
else if(who=='d'){
|
str='ÈÕÆÚ';
|
p='d';
|
}
|
alert(str+'·¢Éú¸Ä±äÁË!\n$dp.cal.date.'+p+'='+c.date[p]+'\n$dp.cal.newdate.'+p+'='+c.newdate[p]);
|
}
|
</script>
|
<br />
|
<input type="text" class="Wdate" onFocus="WdatePicker({<span class="STYLE2">dchanging:<span class="STYLE1">cDayFunc</span>, Mchanging:</span><span class="STYLE1">cMonthFunc</span>,<span class="STYLE2"> ychanging:</span><span class="STYLE1">cYearFunc</span>,<span class="STYLE2"> dchanged:<span class="STYLE1">cDayFunc</span>, Mchanged:</span><span class="STYLE1">cMonthFunc</span>, <span class="STYLE2">ychanged:</span><span class="STYLE1">cYearFunc</span>})"/><br />
|
<span class="STYLE1"><script></span><br />
|
<span class="STYLE2">function</span> cDayFunc(){<br />
|
cFunc('d');<br />
|
}<br />
|
<span class="STYLE2">function</span> cMonthFunc(){<br />
|
cFunc('M');<br />
|
}<br />
|
<span class="STYLE2">function</span> cYearFunc(){<br />
|
cFunc('y');<br />
|
}<br />
|
<span class="STYLE2">function</span> cFunc(who){<br />
|
var str,p,c = $dp.cal;<br />
|
if(who=='y'){<br />
|
str='Äê·Ý';<br />
|
p='y';<br />
|
}<br />
|
else if(who=='M'){<br />
|
str='Ô·Ý';<br />
|
p='M';<br />
|
}<br />
|
else if(who=='d'){<br />
|
str='ÈÕÆÚ';<br />
|
p='d';<br />
|
}<br />
|
alert(str+'·¢Éú¸Ä±äÁË!\n$dp.cal.date.'+p+'='+c.date[p]+'\n$dp.cal.newdate.'+p+'='+c.newdate[p]);<br />
|
}<span class="STYLE1"><br />
|
</script></span><br />
|
<br />
|
Õâ¸öÀý×ÓÓõ½ÁË $dp.cal.date ºÍ $dp.cal.newdate ÊôÐÔ,ÄãÄÜ´ÓÕâÀï·¢ÏÖËûÃǵIJ»Í¬Ö®´¦Âð?<br />
|
ÏÂÃæÊÇÓйØÕâÁ½¸öÊôÐÔµÄÃèÊöÏê¼û<a href="999.asp.htm#m5" tppabs="http://www.my97.net/dp/demo/resource/999.asp#m5">ÄÚÖú¯ÊýºÍÊôÐÔ</a>
|
</p>
|
</div>
|
<p><br />
|
</p>
|
</li>
|
</ol>
|
<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>
|