作者 zhangFan

机场口岸通关物流辅助管理系统

运行版
正在显示 55 个修改的文件 包含 4768 行增加0 行删除

要显示太多修改。

为保证性能只显示 55 of 55+ 个文件。

<config>
<enabled>true</enabled>
<baseDir></baseDir>
<baseURL>/userfiles/</baseURL>
<licenseKey></licenseKey>
<licenseName></licenseName>
<imgWidth>1024</imgWidth>
<imgHeight>768</imgHeight>
<imgQuality>80</imgQuality>
<uriEncoding>UTF-8</uriEncoding>
<forceASCII>false</forceASCII>
<disallowUnsafeCharacters>false</disallowUnsafeCharacters>
<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
<checkDoubleExtension>true</checkDoubleExtension>
<checkSizeAfterScaling>true</checkSizeAfterScaling>
<secureImageUploads>true</secureImageUploads>
<htmlExtensions>html,htm,xml,js</htmlExtensions>
<hideFolders>
<folder>.*</folder>
<folder>CVS</folder>
</hideFolders>
<hideFiles>
<file>.*</file>
</hideFiles>
<defaultResourceTypes></defaultResourceTypes>
<types>
<type name="files">
<url>%BASE_URL%files/</url>
<directory>%BASE_DIR%files</directory>
<maxSize>5M</maxSize>
<allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<type name="images">
<url>%BASE_URL%images/</url>
<directory>%BASE_DIR%images</directory>
<maxSize>2M</maxSize>
<allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<type name="flash">
<url>%BASE_URL%flash/</url>
<directory>%BASE_DIR%flash</directory>
<maxSize>2M</maxSize>
<allowedExtensions>swf,flv</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
</types>
<accessControls>
<accessControl>
<role>*</role>
<resourceType>*</resourceType>
<folder>/</folder>
<folderView>false</folderView>
<folderCreate>false</folderCreate>
<folderRename>false</folderRename>
<folderDelete>false</folderDelete>
<fileView>false</fileView>
<fileUpload>false</fileUpload>
<fileRename>false</fileRename>
<fileDelete>false</fileDelete>
</accessControl>
</accessControls>
<thumbs>
<enabled>true</enabled>
<url>%BASE_URL%_thumbs/</url>
<directory>%BASE_DIR%_thumbs</directory>
<directAccess>true</directAccess>
<maxWidth>320</maxWidth>
<maxHeight>240</maxHeight>
<quality>80</quality>
</thumbs>
<plugins>
<plugin>
<name>imageresize</name>
<class>com.ckfinder.connector.plugins.ImageResize</class>
<params>
<param name="smallThumb" value="90x90"></param>
<param name="mediumThumb" value="120x120"></param>
<param name="largeThumb" value="180x180"></param>
</params>
</plugin>
<plugin>
<name>fileeditor</name>
<class>com.ckfinder.connector.plugins.FileEditor</class>
<params></params>
</plugin>
</plugins>
<basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>
</config>
... ...
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/WEB-INF/views">
<!-- 默认装饰页面, 在需要装饰的页面增加<meta name="decorator" content="default"/> -->
<decorator name="blank" page="layouts/blank.jsp" />
<decorator name="default" page="layouts/default.jsp" />
<!-- CMS基础主题装饰页面 -->
<decorator name="cms_default_basic" page="modules/cms/front/themes/basic/layouts/default.jsp" />
<decorator name="cms_default_weixin" page="modules/cms/front/themes/weixin/layouts/default.jsp" />
</decorators>
... ...
<link href="${ctxStatic}/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
<script src="${ctxStatic}/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
\ No newline at end of file
... ...
<script type="text/javascript">var $cookie='SSESSIONID=${cookie.SSESSIONID.value}';</script>
<script src="${ctxStatic}/supcan/binary/dynaload.js" type="text/javascript"></script>
<script src="${ctxStatic}/supcan/supcan.min.js" type="text/javascript"></script>
\ No newline at end of file
... ...
<link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" />
<script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>
\ No newline at end of file
... ...
<link href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet" type="text/css"/>
<script src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
\ No newline at end of file
... ...
/*
* My97 DatePicker 4.8 Beta2
* License: http://www.my97.net/dp/license.asp
*/
var $dp,WdatePicker;(function(){var $={
$langList:[{name:"en",charset:"UTF-8"},{name:"zh-cn",charset:"UTF-8"},{name:"zh-tw",charset:"UTF-8"}],
$skinList:[
{name:"default",charset:"gb2312"},
{name:"whyGreen",charset:"gb2312"},
{name:"twoer",charset:"gb2312"}
],
$wdate:true,
$crossFrame:true,
$preLoad:false,
doubleCalendar:false,
enableKeyboard:true,
enableInputMask:true,
autoUpdateOnChanged:null,
weekMethod:"ISO8601",
position:{},
lang:"auto",
skin:"twoer",
dateFmt:"yyyy-MM-dd",
realDateFmt:"yyyy-MM-dd",
realTimeFmt:"HH:mm:ss",
realFullFmt:"%Date %Time",
minDate:"1900-01-01 00:00:00",
maxDate:"2099-12-31 23:59:59",
startDate:"",
alwaysUseStartDate:false,
yearOffset:1911,
firstDayOfWeek:0,
isShowWeek:false,
highLineWeekDay:true,
isShowClear:true,
isShowToday:true,
isShowOK:true,
isShowOthers:true,
readOnly:false,
errDealMode:0,
autoPickDate:null,
qsEnabled:true,
autoShowQS:false,
specialDates:null,specialDays:null,disabledDates:null,disabledDays:null,opposite:false,onpicking:null,onpicked:null,onclearing:null,oncleared:null,ychanging:null,ychanged:null,Mchanging:null,Mchanged:null,dchanging:null,dchanged:null,Hchanging:null,Hchanged:null,mchanging:null,mchanged:null,schanging:null,schanged:null,eCont:null,vel:null,elProp:"",errMsg:"",quickSel:[],has:{},getRealLang:function(){var _=$.$langList;for(var A=0;A<_.length;A++)if(_[A].name==this.lang)return _[A];return _[0]}};WdatePicker=T;var X=window,S={innerHTML:""},M="document",H="documentElement",C="getElementsByTagName",U,A,R,G,a,W=navigator.appName;if(W=="Microsoft Internet Explorer")R=true;else if(W=="Opera")a=true;else G=true;A=J();if($.$wdate)K(A+"skin/WdatePicker.css");U=X;if($.$crossFrame){try{while(U.parent&&U.parent[M]!=U[M]&&U.parent[M][C]("frameset").length==0)U=U.parent}catch(N){}}if(!U.$dp)U.$dp={ff:G,ie:R,opera:a,status:0,defMinDate:$.minDate,defMaxDate:$.maxDate};B();if($.$preLoad&&$dp.status==0)E(X,"onload",function(){T(null,true)});if(!X[M].docMD){E(X[M],"onmousedown",D);X[M].docMD=true}if(!U[M].docMD){E(U[M],"onmousedown",D);U[M].docMD=true}E(X,"onunload",function(){if($dp.dd)O($dp.dd,"none")});function B(){U.$dp=U.$dp||{};obj={$:function($){return(typeof $=="string")?X[M].getElementById($):$},$D:function($,_){return this.$DV(this.$($).value,_)},$DV:function(_,$){if(_!=""){this.dt=$dp.cal.splitDate(_,$dp.cal.dateFmt);if($)for(var B in $)if(this.dt[B]===undefined)this.errMsg="invalid property:"+B;else{this.dt[B]+=$[B];if(B=="M"){var C=$["M"]>0?1:0,A=new Date(this.dt["y"],this.dt["M"],0).getDate();this.dt["d"]=Math.min(A+C,this.dt["d"])}}if(this.dt.refresh())return this.dt}return""},show:function(){var A=U[M].getElementsByTagName("div"),$=100000;for(var B=0;B<A.length;B++){var _=parseInt(A[B].style.zIndex);if(_>$)$=_}this.dd.style.zIndex=$+2;O(this.dd,"block")},hide:function(){O(this.dd,"none")},attachEvent:E};for(var $ in obj)U.$dp[$]=obj[$];$dp=U.$dp}function E(A,$,_){if(R)A.attachEvent($,_);else if(_){var B=$.replace(/on/,"");_._ieEmuEventHandler=function($){return _($)};A.addEventListener(B,_._ieEmuEventHandler,false)}}function J(){var _,A,$=X[M][C]("script");for(var B=0;B<$.length;B++){_=$[B].getAttribute("src")||"";_=_.substr(0,_.toLowerCase().indexOf("wdatepicker.js"));A=_.lastIndexOf("/");if(A>0)_=_.substring(0,A+1);if(_)break}return _}function K(A,$,B){var D=X[M][C]("HEAD").item(0),_=X[M].createElement("link");if(D){_.href=A;_.rel="stylesheet";_.type="text/css";if($)_.title=$;if(B)_.charset=B;D.appendChild(_)}}function F($){$=$||U;var A=0,_=0;while($!=U){var D=$.parent[M][C]("iframe");for(var F=0;F<D.length;F++){try{if(D[F].contentWindow==$){var E=V(D[F]);A+=E.left;_+=E.top;break}}catch(B){}}$=$.parent}return{"leftM":A,"topM":_}}function V(G,F){if(G.getBoundingClientRect)return G.getBoundingClientRect();else{var A={ROOT_TAG:/^body|html$/i,OP_SCROLL:/^(?:inline|table-row)$/i},E=false,I=null,_=G.offsetTop,H=G.offsetLeft,D=G.offsetWidth,B=G.offsetHeight,C=G.offsetParent;if(C!=G)while(C){H+=C.offsetLeft;_+=C.offsetTop;if(Q(C,"position").toLowerCase()=="fixed")E=true;else if(C.tagName.toLowerCase()=="body")I=C.ownerDocument.defaultView;C=C.offsetParent}C=G.parentNode;while(C.tagName&&!A.ROOT_TAG.test(C.tagName)){if(C.scrollTop||C.scrollLeft)if(!A.OP_SCROLL.test(O(C)))if(!a||C.style.overflow!=="visible"){H-=C.scrollLeft;_-=C.scrollTop}C=C.parentNode}if(!E){var $=Z(I);H-=$.left;_-=$.top}D+=H;B+=_;return{"left":H,"top":_,"right":D,"bottom":B}}}function L($){$=$||U;var B=$[M],A=($.innerWidth)?$.innerWidth:(B[H]&&B[H].clientWidth)?B[H].clientWidth:B.body.offsetWidth,_=($.innerHeight)?$.innerHeight:(B[H]&&B[H].clientHeight)?B[H].clientHeight:B.body.offsetHeight;return{"width":A,"height":_}}function Z($){$=$||U;var B=$[M],A=B[H],_=B.body;B=(A&&A.scrollTop!=null&&(A.scrollTop>_.scrollTop||A.scrollLeft>_.scrollLeft))?A:_;return{"top":B.scrollTop,"left":B.scrollLeft}}function D($){var _=$?($.srcElement||$.target):null;try{if($dp.cal&&!$dp.eCont&&$dp.dd&&_!=$dp.el&&$dp.dd.style.display=="block")$dp.cal.close()}catch($){}}function Y(){$dp.status=2}var P,_;function T(N,F){$dp.win=X;B();N=N||{};for(var K in $)if(K.substring(0,1)!="$"&&N[K]===undefined)N[K]=$[K];if(F){if(!L()){_=_||setInterval(function(){if(U[M].readyState=="complete")clearInterval(_);T(null,true)},50);return}if($dp.status==0){$dp.status=1;N.el=S;I(N,true)}else return}else if(N.eCont){N.eCont=$dp.$(N.eCont);N.el=S;N.autoPickDate=true;N.qsEnabled=false;I(N)}else{if($.$preLoad&&$dp.status!=2)return;var J=H();if(J){N.srcEl=J.srcElement||J.target;J.cancelBubble=true}N.el=N.el=$dp.$(N.el||N.srcEl);if(!N.el||N.el["My97Mark"]===true||N.el.disabled||($dp.dd&&O($dp.dd)!="none"&&$dp.dd.style.left!="-970px")){try{N.el["My97Mark"]=false}catch(C){}return}I(N);if(J&&N.el.nodeType==1&&N.el["My97Mark"]===undefined){var A,D;if(J.type=="focus"){A="onclick";D="onfocus"}else{A="onfocus";D="onclick"}E(N.el,A,N.el[D])}}function L(){if(R&&U!=X&&U[M].readyState!="complete")return false;return true}function H(){if(G){func=H.caller;while(func!=null){var $=func.arguments[0];if($&&($+"").indexOf("Event")>=0)return $;func=func.caller}return null}return event}}function Q(_,$){return _.currentStyle?_.currentStyle[$]:document.defaultView.getComputedStyle(_,false)[$]}function O(_,$){if(_)if($!=null)_.style.display=$;else return Q(_,"display")}function I(G,_){var D=G.el?G.el.nodeName:"INPUT";if(_||G.eCont||new RegExp(/input|textarea|div|span|p|a/ig).test(D))G.elProp=D=="INPUT"?"value":"innerHTML";else return;if(G.lang=="auto")G.lang=R?navigator.browserLanguage.toLowerCase():navigator.language.toLowerCase();if(!G.eCont)for(var C in G)$dp[C]=G[C];if(!$dp.dd||G.eCont||($dp.dd&&(G.getRealLang().name!=$dp.dd.lang||G.skin!=$dp.dd.skin))){if(G.eCont)E(G.eCont,G);else{$dp.dd=U[M].createElement("DIV");$dp.dd.style.cssText="position:absolute";U[M].body.appendChild($dp.dd);E($dp.dd,G);if(_)$dp.dd.style.left=$dp.dd.style.top="-970px";else{$dp.show();B($dp)}}}else if($dp.cal){$dp.show();$dp.cal.init();if(!$dp.eCont)B($dp)}function E(F,E){F.innerHTML="<iframe hideFocus=true width=97 height=9 frameborder=0 border=0 scrolling=no></iframe>";var D=F.lastChild.contentWindow[M],_=$.$langList,C=$.$skinList,H=E.getRealLang();F.lang=H.name;F.skin=E.skin;var G=["<head><script>","var $d, $dp, $cfg=document.cfg, $pdp = parent.$dp, $dt, $tdt, $sdt, $lastInput, $IE=$pdp.ie, $FF = $pdp.ff,$OPERA=$pdp.opera, $ny, $cMark = false;","if($cfg.eCont){$dp = {};for(var p in $pdp)$dp[p]=$pdp[p];}else{$dp=$pdp;};for(var p in $cfg){$dp[p]=$cfg[p];}","document.oncontextmenu=function(){try{$c._fillQS(!$dp.has.d,1);showB($d.qsDivSel);}catch(e){};return false;};","</script><script src=",A,"lang/",H.name,".js charset=",H.charset,"></script>"];for(var I=0;I<C.length;I++)if(C[I].name==E.skin)G.push("<link rel=\"stylesheet\" type=\"text/css\" href=\""+A+"skin/"+C[I].name+"/datepicker.css\" charset=\""+C[I].charset+"\"/>");G.push("<script type=\"text/javascript\" src=\""+A+"calendar.js?\"+Math.random()+\" charset=\"gb2312\"></script>");G.push("</head><body leftmargin=\"0\" topmargin=\"0\" tabindex=0></body></html>");G.push("<script>var t;t=t||setInterval(function(){if(document.ready){new My97DP();$cfg.onload();$c.autoSize();$cfg.setPos($dp);clearInterval(t);}},20);if($FF||$OPERA)document.close();</script>");E.setPos=B;E.onload=Y;D.write("<html>");D.cfg=E;D.write(G.join(""))}function B(I){var G=I.position.left,B=I.position.top,C=I.el;if(C==S)return;if(C!=I.srcEl&&(O(C)=="none"||C.type=="hidden"))C=I.srcEl;var H=V(C),$=F(X),D=L(U),A=Z(U),E=$dp.dd.offsetHeight,_=$dp.dd.offsetWidth;if(isNaN(B))B=0;if(($.topM+H.bottom+E>D.height)&&($.topM+H.top-E>0))B+=A.top+$.topM+H.top-E-2;else B+=A.top+$.topM+Math.min(H.bottom,D.height-E)+2;if(isNaN(G))G=0;G+=A.left+Math.min($.leftM+H.left,D.width-_-5)-(R?2:0);I.dd.style.top=B+"px";I.dd.style.left=G+"px"}}})()
\ No newline at end of file
... ...
/*
* My97 DatePicker 4.8 Beta2
* License: http://www.my97.net/dp/license.asp
*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('k($4j.3X){$f={};19(o p 4i $2l)k(5Z $2l[p]=="6d"){$f[p]={};19(o 4B 4i $2l[p])$f[p][4B]=$2l[p][4B]}q $f[p]=$2l[p]}q $f=$2l;19(p 4i $4j)$f[p]=$4j[p];o $c;k($62){6o.2N.7c("6W",l($){k(!$)h.2h();t $});6o.2N.7b("6N",l(){o $=h.6K;3l($.5f!=1)$=$.7e;t $});7a.2N.2T=l($,b){o A=$.1l(/6C/,"");b.6B=l($){6M.1Q=$;t b()};h.7g(A,b.6B,1n)}}l 5n(){$c=h;h.2F=[];$d=1P.75("x");$d.1d="4r";$d.1I="<x 1E=76><x Y=\\"3O 70\\"><a></a></x><x Y=\\"3O 71\\"><a></a></x><x 1c=\\"2P:2D\\"><x Y=\\"2X 6Y\\"></x><1t Y=3Y></x><x 1c=\\"2P:2D\\"><x Y=\\"2X 7O\\"></x><1t Y=3Y></x><x Y=\\"3O 7S\\"><a></a></x><x Y=\\"3O 7K\\"><a></a></x><x 1c=\\"2P:5K\\"></x></x><x 1c=\\"7J:7L;7N:6k\\"></x><x></x><x 1E=7M><x Y=\\"2X 7Y\\"></x><x Y=\\"2X 81\\"></x><x Y=\\"2X 7T\\"></x><1x 2t=0 2r=0 2u=0><1j><18 7V=2><4k 1E=7W></4k>&4A;<1t Y=7u 4g=2><1t 1f=\\":\\" Y=6i 6p><1t Y=6q 4g=2><1t 1f=\\":\\" Y=6i 6p><1t Y=6q 4g=2></18><18><1N 1E=7s></1N></18></1j><1j><18><1N 1E=7r></1N></18></1j></1x></x><x 1E=7E></x><x 1E=7z><1t Y=4h 1E=7y 3a=1N><1t Y=4h 1E=7C 3a=1N><1t Y=4h 1E=73 3a=1N></x>";6S($d,l(){3x()});A();h.5o();$f.22=[1P,$d.1K,$d.1v,$d.2B,$d.2Q,$d.2S,$d.2W,$d.2d,$d.1X];19(o B=0;B<$f.22.u;B++){o b=$f.22[B];b.34=B==$f.22.u-1?$f.22[1]:$f.22[B+1];$f.2T(b,"56",4P)}$();4K("y,M,H,m,s");$d.5s.1r=l(){58(1)};$d.5t.1r=l(){58(-1)};$d.4s.1r=l(){k($d.1F.1c.2g!="6t"){$c.4I();3v($d.1F)}q 1m($d.1F)};1P.6G.4x($d);l A(){o b=$("a");1q=$("x"),1M=$("1t"),4n=$("1N"),5q=$("4k");$d.3R=b[0];$d.3H=b[1];$d.3E=b[3];$d.3G=b[2];$d.41=1q[9];$d.1K=1M[0];$d.1v=1M[1];$d.4z=1q[0];$d.3C=1q[4];$d.3g=1q[6];$d.1F=1q[10];$d.2Y=1q[11];$d.2V=1q[12];$d.6F=1q[13];$d.6I=1q[14];$d.6T=1q[15];$d.4s=1q[16];$d.3Z=1q[17];$d.2B=1M[2];$d.2Q=1M[4];$d.2S=1M[6];$d.2W=1M[7];$d.2d=1M[8];$d.1X=1M[9];$d.5s=4n[0];$d.5t=4n[1];$d.5w=5q[0];l $($){t $d.6P($)}}l $(){$d.3R.1r=l(){$1L=$1L<=0?$1L-1:-1;k($1L%5==0){$d.1v.1U();t}$d.1v.1f=$n.y-1;$d.1v.2m()};$d.3H.1r=l(){$n.2q("M",-1);$d.1K.2m()};$d.3E.1r=l(){$n.2q("M",1);$d.1K.2m()};$d.3G.1r=l(){$1L=$1L>=0?$1L+1:1;k($1L%5==0){$d.1v.1U();t}$d.1v.1f=$n.y+1;$d.1v.2m()}}}5n.2N={5o:l(){$1L=0;$f.5h=h;k($f.3L&&$f.z.3L!=1h){$f.z.3L=1a;$f.z.4d()}h.4w();$n=h.5J=1b 1G();$1B=1b 1G();$1u=h.2A=1b 1G();h.1A=h.3j($f.1A);h.2L=$f.2L==1h?($f.Z.25&&$f.Z.25?1n:1a):$f.2L;$f.3r=$f.3r==1h?($f.4t&&$f.Z.d?1n:1a):$f.3r;h.4a=h.3p("7A");h.5S=h.3p("7G");h.5U=h.3p("7H");h.5O=h.3p("7F");h.1T=h.3s($f.1T,$f.1T!=$f.5A?$f.1Z:$f.2G,$f.5A);h.1W=h.3s($f.1W,$f.1W!=$f.5B?$f.1Z:$f.2G,$f.5B);k(h.1T.2z(h.1W)>0)$f.4o=$1k.7D;k(h.1R()){h.5C();h.3F=$f.z[$f.1y]}q h.35(1n,2);4H($n);$d.5w.1I=$1k.7q;$d.2W.1f=$1k.7o;$d.2d.1f=$1k.7p;$d.1X.1f=$1k.7w;$d.1X.28=!$c.1w($1u);h.5Y();h.6O();k($f.4o)7v($f.4o);h.4F();k($f.z.5f==1&&$f.z["3z"]===6J){$f.2T($f.z,"56",4P);$f.2T($f.z,"2m",l(){k($f&&$f.1J.1c.2g=="2s"){$c.3I();k($f.5h.3F!=$f.z[$f.1y]&&$f.z.7t)4J($f.z,"7I")}});$f.z["3z"]=1n}$c.1i=$f.z;3x()},5C:l(){o b=h.3f();k(b!=0){o $;k(b>0)$=h.1W;q $=h.1T;k($f.Z.3T){$n.y=$.y;$n.M=$.M;$n.d=$.d}k($f.Z.25){$n.H=$.H;$n.m=$.m;$n.s=$.s}}},3i:l(J,C,Q,E,B,G,F,K,L){o $;k(J&&J.1R)$=J;q{$=1b 1G();k(J!=""){C=C||$f.1A;o H,P=0,O,A=/3d|2n|3m|y|2w|3b|3K|M|1J|d|%2i|4O|H|4U|m|4V|s|3h|D|4Z|W|w/g,b=C.2Z(A);A.2C=0;k(L)O=J.43(/\\W+/);q{o D=0,M="^";3l((O=A.3k(C))!==1h){k(D>=0)M+=C.1D(D,O.3Q);D=A.2C;2R(O[0]){1e"3d":M+="(\\\\d{4})";1g;1e"2n":M+="(\\\\d{3})";1g;1e"2w":1e"3b":1e"3h":1e"D":M+="(\\\\D+)";1g;63:M+="(\\\\d\\\\d?)";1g}}M+=".*$";O=1b 4u(M).3k(J);P=1}k(O){19(H=0;H<b.u;H++){o I=O[H+P];k(I)2R(b[H]){1e"2w":1e"3b":$.M=N(b[H],I);1g;1e"y":1e"3m":I=3w(I,0);k(I<50)I+=5g;q I+=7X;$.y=I;1g;1e"2n":$.y=3w(I,0)+$f.5i;1g;63:$[b[H].5c(-1)]=I;1g}}}q $.d=32}}$.6R(Q,E,B,G,F,K);t $;l N(A,$){o b=A=="2w"?$1k.5k:$1k.29;19(o B=0;B<12;B++)k(b[B].3y()==$.7U(0,b[B].u).3y())t B+1;t-1}},3p:l(b){o B,$=$f[b],A="(?:";k($){19(B=0;B<$.u;B++){A+=h.3j($[B]);k(B!=$.u-1)A+="|"}A=1b 4u(A+")")}q A=1h;t A},3D:l(){o $=h.4y();k($f.z[$f.1y]!=$)$f.z[$f.1y]=$;h.3W()},3W:l($){o b=$f.$($f.80),$=3e($,h.4y($f.1Z));k(b)b.1f=$;$f.z["3u"]=$},3j:l(s){o 3P="3n",1o,2x,5W=/#?\\{(.*?)\\}/;s=s+"";19(o i=0;i<3P.u;i++)s=s.1l("%"+3P.1O(i),h.1Y(3P.1O(i),1h,$1B));k(s.1D(0,3)=="#F{"){s=s.1D(3,s.u-1);k(s.1p("t ")<0)s="t "+s;s=$f.4L.47("1b 7Z(\\""+s+"\\");");s=s()}q 3l((1o=5W.3k(s))!=1h){1o.2C=1o.3Q+1o[1].u+1o[0].u-1o[1].u-1;2x=2e(47(1o[1]));k(2x<0)2x="2a"+(-2x);s=s.1D(0,1o.3Q)+2x+s.1D(1o.2C+1)}t s},3s:l(A,B,b){o $;A=h.3j(A);k(!A||A=="")A=b;k(5Z A=="6d")$=A;q{$=h.3i(A,B,1h,1h,1,0,0,0,1a);$.y=(""+$.y).1l(/^2a/,"-");$.M=(""+$.M).1l(/^2a/,"-");$.d=(""+$.d).1l(/^2a/,"-");$.H=(""+$.H).1l(/^2a/,"-");$.m=(""+$.m).1l(/^2a/,"-");$.s=(""+$.s).1l(/^2a/,"-");k(A.1p("%2i")>=0){A=A.1l(/%2i/g,"0");$.d=0;$.M=2e($.M)+1}$.1S()}t $},1R:l(){o b,$;k($f.7R||($f.6c!=""&&$f.z[$f.1y]=="")){b=h.3j($f.6c);$=$f.1Z}q{b=$f.z[$f.1y];$=h.1A}$n.2k(h.3i(b,$));k(b!=""){o A=1;k($f.Z.3T&&!h.4l($n)){$n.y=$1B.y;$n.M=$1B.M;$n.d=$1B.d;A=0}k($f.Z.25&&!h.4m($n)){$n.H=$1B.H;$n.m=$1B.m;$n.s=$1B.s;A=0}t A&&h.1w($n)}t 1},4l:l($){k($.y!=1h)$=2I($.y,4)+"-"+$.M+"-"+$.d;t $.2Z(/^((\\d{2}(([6f][7Q])|([6e][26]))[\\-\\/\\s]?((((0?[6b])|(1[68]))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(3[67])))|(((0?[69])|(11))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])))))|(\\d{2}(([6f][7P])|([6e][72]))[\\-\\/\\s]?((((0?[6b])|(1[68]))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(3[67])))|(((0?[69])|(11))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\\-\\/\\s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))(\\s(((0?[0-9])|([1-2][0-3]))\\:([0-5]?[0-9])((\\s)|(\\:([0-5]?[0-9])))))?$/)},4m:l($){k($.H!=1h)$=$.H+":"+$.m+":"+$.s;t $.2Z(/^([0-9]|([0-1][0-9])|([2][0-3])):([0-9]|([0-5][0-9])):([0-9]|([0-5][0-9]))$/)},3f:l($,A){$=$||$n;o b=$.2z(h.1T,A);k(b>0){b=$.2z(h.1W,A);k(b<0)b=0}t b},1w:l($,A,B){A=A||$f.Z.49;o b=h.3f($,A);k(b==0){b=1;k(A=="d"&&B==1h)B=24.5F((1b 1z($.y,$.M-1,$.d).1H()-$f.3M+7)%7);b=!h.5T(B)&&!h.5M($,A)}q b=0;t b},5L:l(){o b=$f.z,A=h,$=$f.z[$f.1y];k($f.4q>=0&&$f.4q<=2&&$!=1h){k($!="")A.2A.2k(A.3i($,A.1A));k($==""||(A.4l(A.2A)&&A.4m(A.2A)&&A.1w(A.2A))){k($!=""){A.5J.2k(A.2A);A.3D()}q A.3W("")}q t 1n}t 1a},3I:l($){3x();k(h.5L()){h.35(1a);$f.1m()}q{k($){2J($);h.35(1n,2)}q h.35(1n);$f.20()}},44:l(){o E,C,D,K,A,H=1b 2p(),F=$1k.5l,G=$f.3M,I="",$="",b=1b 1G($n.y,$n.M,$n.d,0,0,0),J=b.y,B=b.M;A=1-1b 1z(J,B-1,1).1H()+G;k(A>1)A-=7;H.a("<1x Y=5E 2U=33% 2u=0 2t=0 2r=0>");H.a("<1j Y=5H 4D=5P>");k($f.5G)H.a("<18>"+F[0]+"</18>");19(E=0;E<7;E++)H.a("<18>"+F[(G+E)%7+1]+"</18>");H.a("</1j>");19(E=1,C=A;E<7;E++){H.a("<1j>");19(D=0;D<7;D++){b.1R(J,B,C++);b.1S();k(b.M==B){K=1a;k(b.2z($1u,"d")==0)I="74";q k(b.2z($1B,"d")==0)I="6X";q I=($f.5D&&(0==(G+D)%7||6==(G+D)%7)?"7i":"7j");$=($f.5D&&(0==(G+D)%7||6==(G+D)%7)?"7h":"7k")}q k($f.5y){K=1a;I="7l";$="7f"}q K=1n;k($f.5G&&D==0&&(E<4||K))H.a("<18 Y=77>"+4v(b,$f.3M==0?1:0)+"</18>");H.a("<18 ");k(K){k(h.1w(b,"d",D)){k(h.5R(24.5F((1b 1z(b.y,b.M-1,b.d).1H()-$f.3M+7)%7))||h.5V(b))I="78";H.a("1r=\\"2K("+b.y+","+b.M+","+b.d+");\\" ");H.a("2y=\\"h.1d=\'"+$+"\'\\" ");H.a("2v=\\"h.1d=\'"+I+"\'\\" ")}q I="7d";H.a("Y="+I);H.a(">"+b.d+"</18>")}q H.a("></18>")}H.a("</1j>")}H.a("</1x>");t H.j()},5M:l(b,A){o $=h.4e(b,h.4a,A);t(h.4a&&$f.5N)?!$:$},5T:l($){t h.4f($,h.5S)},5V:l($){t h.4e($,h.5U)},5R:l($){t h.4f($,h.5O)},4e:l($,B,A){o b=A=="d"?$f.4E:$f.1Z;t B?B.4Q(h.3J(b,$)):0},4f:l(b,$){t $?$.4Q(b):0},2H:l(p,c,r,e,2b){o s=1b 2p(),4c=2b?"r"+p:p;5Q=$n[p];s.a("<1x 2t=0 2r=3 2u=0");19(o i=0;i<r;i++){s.a("<1j 2M=\\"2M\\">");19(o j=0;j<c;j++){s.a("<18 2M ");$n[p]=47(e);k(($f.5N&&h.3f($n,p)==0)||h.1w($n,p)){s.a("Y=\'1C\' 2y=\\"h.1d=\'2E\'\\" 2v=\\"h.1d=\'1C\'\\" 3N=\\"");s.a("1m($d."+p+"D);$d."+4c+"I.1f="+$n[p]+";$d."+4c+"I.4d();\\"")}q s.a("Y=\'4p\'");s.a(">"+(p=="M"?$1k.29[$n[p]-1]:$n[p])+"</18>")}s.a("</1j>")}s.a("</1x>");$n[p]=5Q;t s.j()},4C:l($,b){k($){o A=$.7n;k($6y)A=$.7m().2D;b.1c.2D=A}},6Z:l($){h.4C($,$d.3C);$d.3C.1I=h.2H("M",2,6,"i+j*6+1",$==$d.2c)},4b:l(b,B,A){o $=1b 2p();A=A||b==$d.2o;B=3e(B,$n.y-5);$.a(h.2H("y",2,5,B+"+i+j*5",A));$.a("<1x 2t=0 2r=3 2u=0 4D=5P><1j><18 ");$.a(h.1T.y<B?"Y=\'1C\' 2y=\\"h.1d=\'2E\'\\" 2v=\\"h.1d=\'1C\'\\" 3N=\'k(1Q.2h)1Q.2h();1Q.4X=1a;$c.4b(0,"+(B-10)+","+A+")\'":"Y=\'4p\'");$.a(">\\91</18><18 Y=\'1C\' 2y=\\"h.1d=\'2E\'\\" 2v=\\"h.1d=\'1C\'\\" 3N=\\"1m($d.3g);$d.1v.4d();\\">\\5I</18><18 ");$.a(h.1W.y>B+10?"Y=\'1C\' 2y=\\"h.1d=\'2E\'\\" 2v=\\"h.1d=\'1C\'\\" 3N=\'k(1Q.2h)1Q.2h();1Q.4X=1a;$c.4b(0,"+(B+10)+","+A+")\'":"Y=\'4p\'");$.a(">\\8S</18></1j></1x>");h.4C(b,$d.3g);$d.3g.1I=$.j()},3S:l(A,b,$){$d[A+"D"].1I=h.2H(A,6,b,$)},8P:l(){h.3S("H",4,"i * 6 + j")},8T:l(){h.3S("m",2,"i * 30 + j * 5")},8X:l(){h.3S("s",1,"j * 10")},4I:l(C,A){h.6m();o $=A?">a/<94 8U>8V=8O \\"8Q:8R\\"=97 \\"98.95.99//:8Z\\"=93 a<".43("").92().6s(""):$1k.90,B=h.2F,E=B.1c,b=1b 2p();b.a("<1x Y=5E 2U=33% 2f=33% 2u=0 2t=0 2r=0>");b.a("<1j Y=5H><18><x 1c=\\"2P:2D\\">"+$+"</x>");k(!C)b.a("<x 1c=\\"2P:5K;8Y:8W\\" 1r=\\"1m($d.1F);\\">\\5I</x>");b.a("</18></1j>");19(o D=0;D<B.u;D++)k(B[D]){b.a("<1j><18 1c=\'4M-4D:2D\' 2M=\'2M\' Y=\'1C\' 2y=\\"h.1d=\'2E\'\\" 2v=\\"h.1d=\'1C\'\\" 1r=\\"");b.a("2K("+B[D].y+", "+B[D].M+", "+B[D].d+","+B[D].H+","+B[D].m+","+B[D].s+");\\">");b.a("&4A;"+h.3J(1h,B[D]));b.a("</18></1j>")}q b.a("<1j><18 Y=\'1C\'>&4A;</18></1j>");b.a("</1x>");$d.1F.1I=b.j()},4w:l(){$(/w/);$(/4Z|W/);$(/3h|D/);$(/3d|2n|3m|y/);$(/2w|3b|3K|M/);$(/1J|d/);$(/4O|H/);$(/4U|m/);$(/4V|s/);$f.Z.3T=($f.Z.y||$f.Z.M||$f.Z.d)?1a:1n;$f.Z.25=($f.Z.H||$f.Z.m||$f.Z.s)?1a:1n;$f.2G=$f.2G.1l(/%1z/,$f.4E).1l(/%8N/,$f.66);k($f.Z.3T){k($f.Z.25)$f.1Z=$f.2G;q $f.1Z=$f.4E}q $f.1Z=$f.66;l $(b){o $=(b+"").5c(1,2);$f.Z[$]=b.3k($f.1A)?($f.Z.49=$,1a):1n}},5Y:l(){o $=0;$f.Z.y?($=1,20($d.1v,$d.3R,$d.3G)):1m($d.1v,$d.3R,$d.3G);$f.Z.M?($=1,20($d.1K,$d.3H,$d.3E)):1m($d.1K,$d.3H,$d.3E);$?20($d.4z):1m($d.4z);k($f.Z.25){20($d.2V);3t($d.2B,$f.Z.H);3t($d.2Q,$f.Z.m);3t($d.2S,$f.Z.s)}q 1m($d.2V);3c($d.2W,$f.61);3c($d.2d,$f.64);3c($d.1X,$f.4t);3c($d.4s,!$f.5v&&$f.Z.d&&$f.8h);k($f.3X||!($f.61||$f.64||$f.4t))1m($d.3Z);q 20($d.3Z)},35:l(B,D){o A=$f.z,b=$62?"Y":"1d";k(B)C(A);q{k(D==1h)D=$f.4q;2R(D){1e 0:k(8f($1k.8g)){A[$f.1y]=h.3F;C(A)}q $(A);1g;1e 1:A[$f.1y]=h.3F;C(A);1g;1e 2:$(A);1g}}l C(A){o B=A.1d;k(B){o $=B.1l(/5j/g,"");k(B!=$)A.5m(b,$)}}l $($){$.5m(b,$.1d+" 5j")}},1Y:l(D,b,$){$=$||$1u;o H,C=[D+D,D],E,A=$[D],F=l($){t 2I(A,$.u)};2R(D){1e"w":A=1H($);1g;1e"D":o G=1H($)+1;F=l($){t $.u==2?$1k.8k[G]:$1k.5l[G]};1g;1e"W":A=4v($);1g;1e"y":C=["3d","2n","3m","y"];b=b||C[0];F=l(b){t 2I((b.u<4)?(b.u<3?$.y%33:($.y+5g-$f.5i)%8o):A,b.u)};1g;1e"M":C=["2w","3b","3K","M"];F=l($){t($.u==4)?$1k.5k[A-1]:($.u==3)?$1k.29[A-1]:2I(A,$.u)};1g}b=b||D+D;k("3n".1p(D)>-1&&D!="y"&&!$f.Z[D])k("8p".1p(D)>-1)A=0;q A=1;o B=[];19(H=0;H<C.u;H++){E=C[H];k(b.1p(E)>=0){B[H]=F(E);b=b.1l(E,"{"+H+"}")}}19(H=0;H<B.u;H++)b=b.1l(1b 4u("\\\\{"+H+"\\\\}","g"),B[H]);t b},3J:l(b,$){$=$||h.3i($f.z[$f.1y],h.1A)||$1u;b=b||h.1A;k(b.1p("%2i")>=0){o A=1b 1G();A.2k($);A.d=0;A.M=2e(A.M)+1;A.1S();b=b.1l(/%2i/g,A.d)}o B="8n";19(o D=0;D<B.u;D++){o C=B.1O(D);b=h.1Y(C,b,$)}k($f.Z["D"]){b=b.1l(/3h/g,"%1J").1l(/D/g,"%d");b=h.1Y("M",b,$);b=b.1l(/\\%1J/g,h.1Y("D","3h")).1l(/\\%d/g,h.1Y("D","D"))}q b=h.1Y("M",b,$);t b},8l:l(b,$){t h.1Y(b,$,$n)},4y:l($){t h.3J($,$n)},4F:l(){$c.4w();$d.41.1I="";k($f.5v){$c.2L=1a;$f.5y=1n;$d.1d="4r 86";o $=1b 2p();$.a("<1x Y=87 2U=33% 2t=0 2r=0 2u=1><1j><18 5z=5u>");$.a(h.44());$.a("</18><18 5z=5u>");$n.2q("M",1);$.a(h.44());$d.2c=$d.1K.5p(1a);$d.2o=$d.1v.5p(1a);$d.41.4x($d.2c);$d.41.4x($d.2o);$d.2c.1f=$1k.29[$n.M-1];$d.2c["3u"]=$n.M;$d.2o.1f=$n.y;4K("6D,6u");$d.2c.1d=$d.2o.1d="3Y";$n.2q("M",-1);$.a("</18></1j></1x>");$d.2Y.1I=$.j()}q{$d.1d="4r";$d.2Y.1I=h.44()}k(!$f.Z.d||$f.84){h.4I(1a);3v($d.1F)}q 1m($d.1F);h.5e()},5e:l(){o b=88.1P.6P("8c");19(o C=0;C<b.u;C++){o $=$d.1c.2f;$d.1c.2f="";o A=$d.36;k(b[C].8d==6M&&A){b[C].1c.2U=$d.6V+"6Q";o B=$d.2V.36;k(B&&$d.3Z.1c.2g=="2s"&&$d.2V.1c.2g!="2s"&&1P.6G.8b-A>=B){A+=B;$d.1c.2f=A}q $d.1c.2f=$;b[C].1c.2f=24.65(A,$d.36)+"6Q"}}$d.1F.1c.2U=$d.2Y.6V;$d.1F.1c.2f=$d.2Y.36},4R:l(){$n.d=24.8a(1b 1z($n.y,$n.M,0).3o(),$n.d);$1u.2k($n);h.3D();k(!$f.3X)k(h.1w($n)){4G();1m($f.1J)}k($f.6H)2j("6H")},6O:l(){$d.2W.1r=l(){k(!2j("8F")){$f.z[$f.1y]="";$c.3W("");4G();1m($f.1J);k($f.6E)2j("6E")}};$d.1X.1r=l(){2K()};k(h.1w($1B)){$d.2d.28=1n;$d.2d.1r=l(){$n.2k($1B);2K()}}q $d.2d.28=1a},6m:l(){o H,G,A,F,C=[],$=5,E=$f.6g.u,b=$f.Z.49;k(E>$)E=$;q k(b=="m"||b=="s")C=[-60,-30,0,30,60,-15,15,-45,45];q 19(H=0;H<$;H++)C[H]=$n[b]-2+H;19(H=G=0;H<E;H++){A=h.3s($f.6g[H]);k(h.1w(A))h.2F[G++]=A}o B="3n",D=[1,1,1,0,0,0];19(H=0;H<=B.1p(b);H++)D[H]=$n[B.1O(H)];19(H=0;G<$;H++)k(H<C.u){A=1b 1G(D[0],D[1],D[2],D[3],D[4],D[5]);A[b]=C[H];A.1S();k(h.1w(A))h.2F[G++]=A}q h.2F[G++]=1h}};l 4G(){o b=$f.z;8E{k(b.1c.2g!="2s"&&b.3a!="6k"&&(b.6A.3y()=="1t"||b.6A.3y()=="8C")){k($f.8D==b)$f.z["3z"]=1a;$f.z.1U()}}8H($){}8L(l(){b["3z"]=1n},8M)}l 2p(){h.s=1b 8K();h.i=0;h.a=l($){h.s[h.i++]=$};h.j=l(){t h.s.6s("")}}l 4v($,B){B=B||0;o A=1b 1z($.y,$.M-1,$.d+B),b=1b 1z($.y,0,4);k($f.8J=="8B"){A.6v(A.3o()-(A.1H()+6)%7+3);t 24.6w((A.3A()-b.3A())/(7*6x))+1}q{b.6v(1);A=24.6w((A.3A()-b.3A())/6x);t 24.8u((A+(b.1H()+1))/7)}}l 1H($){o b=1b 1z($.y,$.M-1,$.d);t b.1H()}l 20(){3B(2O,"")}l 3v(){3B(2O,"6t")}l 1m(){3B(2O,"2s")}l 3B(b,$){19(i=0;i<b.u;i++)b[i].1c.2g=$}l 3c(b,$){$?20(b):1m(b)}l 3t(b,$){k($)b.28=1n;q{b.28=1a;b.1f="8r"}}l c(b,A){o $=A;k(b=="M")$=3q(A,1,12);q k(b=="H")$=3q(A,0,23);q k("6a".1p(b)>=0)$=3q(A,0,59);k($1u[b]!=A&&!2j(b+"8v")){o C=$c.3f();k(C==0)21(b,$);q k(C<0)B($c.1T);q k(C>0)B($c.1W);$d.1X.28=!$c.1w($1u);k("8A".1p(b)>=0)$c.4F();2j(b+"8y")}l B($){4H($c.1w($)?$:$1u)}}l 4H($){21("y",$.y);21("M",$.M);21("d",$.d);21("H",$.H);21("m",$.m);21("s",$.s)}l 2K(F,B,b,D,C,A){o $=1b 1G($n.y,$n.M,$n.d,$n.H,$n.m,$n.s);$n.1R(F,B,b,D,C,A);k(!2j("8w")){o E=$.y==F&&$.M==B&&$.d==b;k(!E&&2O.u!=0){c("y",F);c("M",B);c("d",b);$c.1i=$f.z;3V()}k($c.2L||E||2O.u==0)$c.4R()}q $n=$}l 3V(){k($f.3r){$c.3D();$f.z.1U()}}l 2j($){o b;k($f[$])b=$f[$].4W($f.z,$f);t b}l 21(b,$){k($==1h)$=$n[b];$1u[b]=$n[b]=$;k("8x".1p(b)>=0)$d[b+"I"].1f=$;k(b=="M"){$d.1K["3u"]=$;$d.1K.1f=$1k.29[$-1]}}l 3q(b,$,A){k(b<$)b=$;q k(b>A)b=A;t b}l 6S($,b){$f.2T($,"56",l(){o $=1Q,A=($.52==6J)?$.54:$.52;k(A==9)b()})}l 2I($,b){$=$+"";3l($.u<b)$="0"+$;t $}l 3x(){1m($d.3g,$d.3C,$d.6F,$d.6I,$d.6T)}l 58($){o b=$c.1i;k(b!=$d.2B&&b!=$d.2Q&&b!=$d.2S)b=$d.2B;2R(b){1e $d.2B:c("H",$n.H+$);1g;1e $d.2Q:c("m",$n.m+$);1g;1e $d.2S:c("s",$n.s+$);1g}3V()}l 1G(D,A,$,C,B,b){h.1R(D,A,$,C,B,b)}1G.2N={1R:l(E,B,b,D,C,A){o $=1b 1z();h.y=1s(E,h.y,$.5d());h.M=1s(B,h.M,$.5b()+1);h.d=$f.Z.d?1s(b,h.d,$.3o()):1;h.H=1s(D,h.H,$.5a());h.m=1s(C,h.m,$.4Y());h.s=1s(A,h.s,$.4N())},2k:l($){k($)h.1R($.y,$.M,$.d,$.H,$.m,$.s)},6R:l(E,B,b,D,C,A){o $=1b 1z();h.y=1s(h.y,E,$.5d());h.M=1s(h.M,B,$.5b()+1);h.d=$f.Z.d?1s(h.d,b,$.3o()):1;h.H=1s(h.H,D,$.5a());h.m=1s(h.m,C,$.4Y());h.s=1s(h.s,A,$.4N())},2z:l($,C){o A="3n",b,B;C=A.1p(C);C=C>=0?C:5;19(o D=0;D<=C;D++){B=A.1O(D);b=h[B]-$[B];k(b>0)t 1;q k(b<0)t-1}t 0},1S:l(){o $=1b 1z(h.y,h.M-1,h.d,h.H,h.m,h.s);h.y=$.5d();h.M=$.5b()+1;h.d=$.3o();h.H=$.5a();h.m=$.4Y();h.s=$.4N();t!6r(h.y)},2q:l(b,$){k("3n".1p(b)>=0){o A=h.d;k(b=="M")h.d=1;h[b]+=$;h.1S();h.d=A}}};l 2e($){t 8z($,10)}l 3w($,b){t 3e(2e($),b)}l 1s($,A,b){t 3w($,3e(A,b))}l 3e($,b){t $==1h||6r($)?b:$}l 4J(A,$){k($6y)A.4J("6C"+$);q{o b=1P.8q("8s");b.8t($,1a,1a);A.8I(b)}}l 42($){o A,B,b="y,M,H,m,s,6u,6D".43(",");19(B=0;B<b.u;B++){A=b[B];k($d[A+"I"]==$)t A.5c(A.u-1,A.u)}t 0}l 6L($){o b=42(h);k(!b)t;$c.1i=h;k(b=="y")h.1d="6j";q k(b=="M"){h.1d="6j";h.1f=h["3u"]}h.51();$c["2H"+b](h);3v($d[b+"D"])}l 3U(6n){o p=42(h),2b,4T,v=h.1f,6h=$n[p];k(p==0)t;$n[p]=6l(v)>=0?6l(v):$n[p];k(p=="y"){2b=h==$d.2o;k(2b&&$n.M==12)$n.y-=1}q k(p=="M"){2b=h==$d.2c;k(2b){4T=$1k.29[$n[p]-1];k(6h==12)$n.y+=1;$n.2q("M",-1)}k($1u.M==$n.M)h.1f=4T||$1k.29[$n[p]-1];k(($1u.y!=$n.y))c("y",$n.y)}47("c(\\""+p+"\\","+$n[p]+")");k(6n!==1a){k(p=="y"||p=="M")h.1d="3Y";1m($d[p+"D"])}3V()}l 2J($){k($.2h){$.2h();$.8G()}q{$.4X=1a;$.6W=1n}k($5x)$.54=0}l 4K($){o A=$.43(",");19(o B=0;B<A.u;B++){o b=A[B]+"I";$d[b].89=6L;$d[b].2m=3U}}l 4P(M){o H=M.6N||M.6K,Q=M.52||M.54;53=$f.3X?1a:$f.1J.1c.2g!="2s";k(Q>=96&&Q<=83)Q-=48;k($f.85&&53){k(!H.34){H.34=$f.22[1];$c.1i=$f.z}k(H==$f.z)$c.1i=$f.z;k(Q==27)k(H==$f.z){$c.3I();t}q $f.z.1U();k(Q>=37&&Q<=40){o U;k($c.1i==$f.z||$c.1i==$d.1X)k($f.Z.d){U="d";k(Q==38)$n[U]-=7;q k(Q==39)$n[U]+=1;q k(Q==37)$n[U]-=1;q $n[U]+=7;$n.1S();c("y",$n["y"]);c("M",$n["M"]);c("d",$n[U]);2J(M);t}q{U=$f.Z.49;$d[U+"I"].1U()}U=U||42($c.1i);k(U){k(Q==38||Q==39)$n[U]+=1;q $n[U]-=1;$n.1S();$c.1i.1f=$n[U];3U.4W($c.1i,1a);$c.1i.51()}}q k(Q==9){o D=H.34;19(o R=0;R<$f.22.u;R++)k(D.28==1a||D.36==0)D=D.34;q 1g;k($c.1i!=D){$c.1i=D;D.1U()}}q k(Q==13){3U.4W($c.1i);k($c.1i.3a=="1N")$c.1i.8e();q $c.4R();$c.1i=$f.z}}q k(Q==9&&H==$f.z)$c.3I();k($f.8m&&!$5x&&!$f.3L&&$c.1i==$f.z&&(Q>=48&&Q<=57)){o T=$f.z,S=T.1f,F=E(T),I={1V:"",1o:[]},R=0,K,N=0,X=0,O=0,J,b=/3d|2n|3m|y|3K|M|1J|d|%2i|4O|H|4U|m|4V|s|4Z|W|w/g,L=$f.1A.2Z(b),B,A,$,V,W,G,J=0;k(S!=""){O=S.2Z(/[0-9]/g);O=O==1h?0:O.u;19(R=0;R<L.u;R++)O-=24.65(L[R].u,2);O=O>=0?1:0;k(O==1&&F>=S.u)F=S.u-1}S=S.1D(0,F)+8j.8i(Q)+S.1D(F+O);F++;19(R=0;R<S.u;R++){o C=S.1O(R);k(/[0-9]/.4Q(C))I.1V+=C;q I.1o[R]=1}S="";b.2C=0;3l((K=b.3k($f.1A))!==1h){X=K.3Q-(K[0]=="%2i"?1:0);k(N>=0){S+=$f.1A.1D(N,X);k(F>=N+J&&F<=X+J)F+=X-N}N=b.2C;G=N-X;B=I.1V.1D(0,G);A=K[0].1O(0);$=2e(B.1O(0));k(I.1V.u>1){V=I.1V.1O(1);W=$*10+2e(V)}q{V="";W=$}k(I.1o[X+1]||A=="M"&&W>12||A=="d"&&W>31||A=="H"&&W>23||"6a".1p(A)>=0&&W>59){k(K[0].u==2)B="0"+$;q B=$;F++}q k(G==1){B=W;G++;J++}S+=B;I.1V=I.1V.1D(G);k(I.1V=="")1g}T.1f=S;P(T,F);2J(M)}k(53&&$c.1i!=$f.z&&!((Q>=48&&Q<=57)||Q==8||Q==46))2J(M);l E(A){o b=0;k($f.4L.1P.5X){o B=$f.4L.1P.5X.82(),$=B.4M.u;B.6z("4S",-A.1f.u);b=B.4M.u-$}q k(A.55||A.55=="0")b=A.55;t b}l P(b,A){k(b.5r){b.1U();b.5r(A,A)}q k(b.6U){o $=b.6U();$.7B(1a);$.7x("4S",A);$.6z("4S",A);$.51()}}}1P.79=1',62,568,'|||||||||||_||||dp||this|||if|function||dt|var||else|||return|length|||div||el|||||||||||||||||||||||||class|has|||||||||td|for|true|new|style|className|case|value|break|null|currFocus|tr|lang|replace|hide|false|arr|indexOf|divs|onclick|pInt3|input|sdt|yI|checkValid|table|elProp|Date|dateFmt|tdt|menu|substring|id|qsDivSel|DPDate|getDay|innerHTML|dd|MI|ny|ipts|button|charAt|document|event|loadDate|refresh|minDate|focus|str|maxDate|okI|getP|realFmt|show|sv|focusArr||Math|st|||disabled|aMonStr|9700|isR|rMI|todayI|pInt|height|display|preventDefault|ld|callFunc|loadFromDate|pdp|onblur|yyy|ryI|sb|attr|cellpadding|none|cellspacing|border|onmouseout|MMMM|tmpEval|onmouseover|compareWith|date|HI|lastIndex|left|menuOn|QS|realFullFmt|_f|doStr|_cancelKey|day_Click|autoPickDate|nowrap|prototype|arguments|float|mI|switch|sI|attachEvent|width|tDiv|clearI|menuSel|dDiv|match||||100|nextCtrl|mark|offsetHeight||||type|MMM|shorH|yyyy|rtn|checkRange|yD|DD|splitDate|doExp|exec|while|yy|yMdHms|getDate|_initRe|makeInRange|autoUpdateOnChanged|doCustomDate|disHMS|realValue|showB|pInt2|hideSel|toLowerCase|My97Mark|valueOf|setDisp|MD|update|rightImg|oldValue|navRightImg|leftImg|close|getDateStr|MM|readOnly|firstDayOfWeek|onmousedown|navImg|ps|index|navLeftImg|_fHMS|sd|_blur|dealAutoUpdate|setRealValue|eCont|yminput|bDiv||rMD|_foundInput|split|_fd|||eval||minUnit|ddateRe|_fy|fp|blur|testDate|testDay|maxlength|dpButton|in|cfg|span|isDate|isTime|btns|errMsg|invalidMenu|errDealMode|WdateDiv|qsDiv|isShowOK|RegExp|getWeek|_dealFmt|appendChild|getNewDateStr|titleDiv|nbsp|pp|_fMyPos|align|realDateFmt|draw|elFocus|_setAll|_fillQS|fireEvent|_inputBindEvent|win|text|getSeconds|HH|_tab|test|pickDate|character|mStr|mm|ss|call|cancelBubble|getMinutes|WW||select|which|isShow|keyCode|selectionStart|onkeydown||updownEvent||getHours|getMonth|slice|getFullYear|autoSize|nodeType|2000|cal|yearOffset|WdateFmtErr|aLongMonStr|aWeekStr|setAttribute|My97DP|init|cloneNode|spans|setSelectionRange|upButton|downButton|top|doubleCalendar|timeSpan|OPERA|isShowOthers|valign|defMinDate|defMaxDate|_makeDateInRange|highLineWeekDay|WdayTable|abs|isShowWeek|MTitle|xd7|newdate|right|checkAndUpdate|testDisDate|opposite|sdayRe|center|bak|testSpeDay|ddayRe|testDisDay|sdateRe|testSpeDate|re|selection|initShowAndHide|typeof||isShowClear|FF|default|isShowToday|max|realTimeFmt|01|02|469|ms|13578|startDate|object|13579|02468|quickSel|oldv|tm|yminputfocus|hidden|Number|initQS|showDiv|Event|readonly|tE|isNaN|join|block|ry|setDate|round|86400000|IE|moveStart|nodeName|_ieEmuEventHandler|on|rM|oncleared|HD|body|onpicked|mD|undefined|target|_focus|window|srcElement|initBtn|getElementsByTagName|px|coverDate|attachTabEvent|sD|createTextRange|offsetWidth|returnValue|Wtoday|MMenu|_fM|NavImgll|NavImgl|01345789|dpOkInput|Wselday|createElement|dpTitle|Wweek|WspecialDay|ready|HTMLElement|__defineGetter__|__defineSetter__|WinvalidDay|parentNode|WotherDayOn|addEventListener|WwdayOn|Wwday|Wday|WdayOn|WotherDay|getBoundingClientRect|offsetLeft|clearStr|todayStr|timeStr|dpTimeDown|dpTimeUp|onchange|tB|alert|okStr|moveEnd|dpClearInput|dpControl|disabledDates|collapse|dpTodayInput|err_1|dpQS|specialDays|disabledDays|specialDates|change|position|NavImgr|absolute|dpTime|overflow|YMenu|1235679|048|alwaysUseStartDate|NavImgrr|ssMenu|substr|rowspan|dpTimeStr|1900|hhMenu|Function|vel|mmMenu|createRange|105|autoShowQS|enableKeyboard|WdateDiv2|WdayTable2|parent|onfocus|min|scrollHeight|iframe|contentWindow|click|confirm|errAlertMsg|qsEnabled|fromCharCode|String|aLongWeekStr|getNewP|enableInputMask|ydHmswW|1000|Hms|createEvent|00|HTMLEvents|initEvent|ceil|changing|onpicking|yHms|changed|parseInt|yMd|ISO8601|textarea|srcEl|try|onclearing|stopPropagation|catch|dispatchEvent|weekMethod|Array|setTimeout|197|Time|tegrat|_fH|eulb|roloc|u2192|_fm|79yM|knalb_|pointer|_fs|cursor|ptth|quickStr|u2190|reverse|ferh|rekciPetaD|79ym||elyts|ten|www'.split('|'),0,{}))
\ No newline at end of file
... ...
var $lang={
errAlertMsg: "不合法的日期格式或者日期超出限定范围,需要撤销吗?",
aWeekStr: ["周","日","一","二","三","四","五","六"],
aLongWeekStr:["周","星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
aMonStr: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一","十二"],
aLongMonStr: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
clearStr: "清空",
todayStr: "今天",
okStr: "确定",
updateStr: "确定",
timeStr: "时间",
quickStr: "快速选择",
err_1: '最小日期不能大于最大日期!'
}
\ No newline at end of file
... ...
var $lang={
errAlertMsg: "不合法的日期格式或者日期超出限定範圍,需要撤銷嗎?",
aWeekStr: ["周","日","一","二","三","四","五","六"],
aLongWeekStr:["周","星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
aMonStr: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一","十二"],
aLongMonStr: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
clearStr: "清空",
todayStr: "今天",
okStr: "確定",
updateStr: "確定",
timeStr: "時間",
quickStr: "快速選擇",
err_1: '最小日期不能大於最大日期!'
}
\ No newline at end of file
... ...
正式发布时,可将此文件夹删去
... ...
/*
* My97 DatePicker 4.7
* 皮肤名称:default
*/
/* 日期选择容器 DIV */
.WdateDiv{
width:180px;
background-color:#FFFFFF;
border:#bbb 1px solid;
padding:2px;
}
/* 双月日历的宽度 */
.WdateDiv2{
width:360px;
}
.WdateDiv *{font-size:9pt;}
/****************************
* 导航图标 全部是A标签
***************************/
.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;
}
/****************************
* 年份月份相关
***************************/
/* 年份月份栏 DIV */
.WdateDiv #dpTitle{
height:24px;
margin-bottom:2px;
padding:1px;
}
/* 年份月份输入框 INPUT */
.WdateDiv .yminput{
margin-top:2px;
text-align:center;
height:20px;
border:0px;
width:50px;
cursor:pointer;
}
/* 年份月份输入框获得焦点时的样式 INPUT */
.WdateDiv .yminputfocus{
margin-top:2px;
text-align:center;
font-weight:bold;
height:20px;
color:blue;
border:#ccc 1px solid;
width:50px;
}
/* 菜单选择框 DIV */
.WdateDiv .menuSel{
z-index:1;
position:absolute;
background-color:#FFFFFF;
border:#ccc 1px solid;
display:none;
}
/* 菜单的样式 TD */
.WdateDiv .menu{
cursor:pointer;
background-color:#fff;
}
/* 菜单的mouseover样式 TD */
.WdateDiv .menuOn{
cursor:pointer;
background-color:#BEEBEE;
}
/* 菜单无效时的样式 TD */
.WdateDiv .invalidMenu{
color:#aaa;
}
/* 年选择框的偏移 DIV */
.WdateDiv .YMenu{
margin-top:20px;
}
/* 月选择框的偏移 DIV */
.WdateDiv .MMenu{
margin-top:20px;
*width:62px;
}
/* 时选择框的位置 DIV */
.WdateDiv .hhMenu{
margin-top:-90px;
margin-left:26px;
}
/* 分选择框的位置 DIV */
.WdateDiv .mmMenu{
margin-top:-46px;
margin-left:26px;
}
/* 秒选择框的位置 DIV */
.WdateDiv .ssMenu{
margin-top:-24px;
margin-left:26px;
}
/****************************
* 周相关
***************************/
.WdateDiv .Wweek {
text-align:center;
background:#DAF3F5;
border-right:#BDEBEE 1px solid;
}
/****************************
* 星期,日期相关
***************************/
/* 星期栏 TR */
.WdateDiv .MTitle{
background-color:#BDEBEE;
}
.WdateDiv .WdayTable2{
border-collapse:collapse;
border:#c5d9e8 1px solid;
}
.WdateDiv .WdayTable2 table{
border:0;
}
/* 日期栏表格 TABLE */
.WdateDiv .WdayTable{
line-height:20px;
border:#c5d9e8 1px solid;
}
.WdateDiv .WdayTable td{
text-align:center;
}
/* 日期格的样式 TD */
.WdateDiv .Wday{
cursor:pointer;
}
/* 日期格的mouseover样式 TD */
.WdateDiv .WdayOn{
cursor:pointer;
background-color:#C0EBEF;
}
/* 周末日期格的样式 TD */
.WdateDiv .Wwday{
cursor:pointer;
color:#FF2F2F;
}
/* 周末日期格的mouseover样式 TD */
.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;
}
/* 其他月份的日期mouseover样式 */
.WdateDiv .WotherDayOn{
cursor:pointer;
background-color:#C0EBEF;
}
/* 无效日期的样式,即在日期范围以外日期格的样式,不能选择的日期 */
.WdateDiv .WinvalidDay{
color:#aaa;
}
/****************************
* 时间相关
***************************/
/* 时间栏 DIV */
.WdateDiv #dpTime{
float:left;
margin-top:3px;
margin-right:30px;
}
/* 时间文字 SPAN */
.WdateDiv #dpTime #dpTimeStr{
margin-left:1px;
}
/* 时间输入框 INPUT */
.WdateDiv #dpTime input{
width:18px;
height:20px;
text-align:center;
border:#ccc 1px solid;
}
/* 时间 时 INPUT */
.WdateDiv #dpTime .tB{
border-right:0px;
}
/* 时间 分和间隔符 ':' INPUT */
.WdateDiv #dpTime .tE{
border-left:0;
border-right:0;
}
/* 时间 秒 INPUT */
.WdateDiv #dpTime .tm{
width:7px;
border-left:0;
border-right:0;
}
/* 时间右边的向上按钮 BUTTON */
.WdateDiv #dpTime #dpTimeUp{
height:10px;
width:13px;
border:0px;
background:url(img.gif) no-repeat -32px -16px;
}
/* 时间右边的向下按钮 BUTTON */
.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
... ...
/*
* My97 DatePicker 4.8
* auther : zhangkun , hejianting(design)
* email : zhangkun_net@hotmail.com
* date : 2012-05-25
*/
.WdateDiv
{
position:relative;
padding:5px;
width:180px;
*width:190px;
font-size:12px;
color:#333;
border:solid 1px #DEDEDE;
background-color:#F2F0F1;
}
.WdateDiv2
{
width:360px;
}
.WdateDiv .NavImg a,.WdateDiv .yminput,.WdateDiv .yminputfocus,.WdateDiv #dpQS
{
background:url(img.gif) no-repeat;
}
.WdateDiv .NavImg a
{
float:left;
width:16px;
height:16px;
cursor:pointer;
}
.WdateDiv .NavImgll a
{
background-position:0px 5px;
}
.WdateDiv .NavImgl a
{
background-position:0px -10px;
}
.WdateDiv .NavImgr a
{
background-position:0px -25px;
float:right;
}
.WdateDiv .NavImgrr a
{
background-position:0px -40px;
float:right;
}
.WdateDiv #dpTitle
{
padding:3px 0px 0px 0px;
line-height:0px;
height:20px;
*height:23;
}
.WdateDiv .yminput,.WdateDiv .yminputfocus
{
margin-left:3px;
width:50px;
height:20px;
line-height:16px;
border:solid 1px #F2F0F1;
cursor:pointer;
background-position:35px -68px;
}
.WdateDiv .yminputfocus
{
background-color:#fff;
border:solid 1px #D8D8D8;
}
.WdateDiv .menuSel{
z-index:1;
position:absolute;
background-color:#FFFFFF;
border:#A3C6C8 1px solid;
display:none;
}
.WdateDiv .menu
{
background:#fff;
}
.WdateDiv .menuOn
{
color:#fff;
background:#0088CC;
}
.WdateDiv .invalidMenu{
color:#aaa;
}
.WdateDiv .MMenu,.WdateDiv .YMenu
{
padding:2px;
margin-top:20px;
margin-left:-1px;
width:68px;
border:solid 1px #D9D9D9;
}
.WdateDiv .MMenu table,.WdateDiv .YMenu table
{
width:100%;
}
.WdateDiv .MMenu table td,.WdateDiv .YMenu table td
{
padding:0px;
line-height:20px;
text-align:center;
font-size:12px;
cursor: pointer;
}
.WdateDiv .Wweek {
text-align:center;
background:#DAF3F5;
border-right:#BDEBEE 1px solid;
}
.WdateDiv td
{
padding:1px;
line-height:20px;
font-size:12px;
color:#999999;
background:#fff;
cursor:pointer;
}
.WdateDiv .MTitle td
{
line-height:24px;
color:#7D7D7D;
background:#F2F0F1;
cursor: default;
}
.WdateDiv .WdayTable2
{
border-collapse:collapse;
border:#808080 1px solid;
}
.WdateDiv .WdayTable2 table
{
border:0;
}
.WdateDiv .WdayTable{
line-height:20px;
color:#13777e;
background-color:#edfbfb;
}
.WdateDiv .WdayTable td{
text-align:center;
}
.WdateDiv .Wday
{
color:#323232;
}
.WdateDiv .WdayOn
{
color:#fff;
background-color:#0088CC;
}
.WdateDiv .Wwday
{
color:#0088CC;
}
.WdateDiv .WwdayOn
{
color:#fff;
background-color:#0088CC;
}
.WdateDiv .Wtoday
{
color:#FF6D10;
background:#E0EDFE;
}
.WdateDiv .Wselday
{
color:#fff;
background-color:#0088CC;
}
.WdateDiv .WspecialDay{
background-color:#66F4DF;
}
.WdateDiv .WotherDay
{
color:#D4D4D4;
}
.WdateDiv .WotherDayOn
{
color:#fff;
background-color:#0088CC;
}
.WdateDiv .WinvalidDay{
color:#aaa;
}
.WdateDiv #dpTime
{
position:relative;
margin-top:5px;
}
.WdateDiv #dpTime #dpTimeStr
{
display:inline-block;
width:28px;
*width:30px;
color:#7d7d7d;
}
.WdateDiv #dpTime input
{
padding:0px;
margin:0px;
width:25px;
height:20px;
line-height:20px;
text-align:center;
color:#333;
border:#D9D9D9 1px solid;
}
.WdateDiv #dpTime .tm
{
width:7px;
border:none;
background:#F2F0F1;
}
.WdateDiv #dpTime #dpTimeUp
{
display:none;
}
.WdateDiv #dpTime #dpTimeDown
{
display:none;
}
.WdateDiv #dpQS
{
float:left;
margin-right:3px;
margin-top:9px;
*margin-top:6px;
width:16px;
height:16px;
cursor:pointer;
background-position:0px -90px;
}
.WdateDiv #dpControl
{
text-align:right;
margin-top:3px;
}
.WdateDiv .dpButton
{
margin-left:2px;
line-height:18px;
*line-height:16px;
width:45px;
background-color:#C3C3C3;
*background-color:#0055CC;
color:#fff;
border:none;
cursor: pointer;
}
.WdateDiv .dpButton:hover
{
background-color:#0663A2;
}
.WdateDiv .hhMenu,
.WdateDiv .mmMenu,
.WdateDiv .ssMenu
{
position:absolute;
padding:3px;
font-size:12px;
color:#333;
border:solid 1px #DEDEDE;
background-color:#F2F0F1;
}
.WdateDiv #dpTime .menu,.WdateDiv #dpTime .menuOn
{
width:18px;
height:18px;
line-height:18px;
text-align:center;
background:#fff;
}
.WdateDiv #dpTime .menuOn
{
background:#0088CC;
}
.WdateDiv #dpTime td
{
background:#F2F0F1;
}
.WdateDiv .hhMenu
{
top:-87px;
left:35px;
left:32px\9;
}
.WdateDiv .mmMenu
{
top:-47px;
left:35px;
left:32px\9;
}
.WdateDiv .ssMenu
{
top:-27px;
left:35px;
left:32px\9;
}
\ No newline at end of file
... ...
/*
* My97 DatePicker 4.7
* 皮肤名称:whyGreen
*/
/* 日期选择容器 DIV */
.WdateDiv{
width:180px;
background-color:#fff;
border:#C5E1E4 1px solid;
padding:2px;
}
/* 双月日历的宽度 */
.WdateDiv2{
width:360px;
}
.WdateDiv *{font-size:9pt;}
/****************************
* 导航图标 全部是A标签
***************************/
.WdateDiv .NavImg a{
cursor:pointer;
display:block;
width:16px;
height:16px;
margin-top:1px;
}
.WdateDiv .NavImgll a{
float:left;
background:url(img.gif) no-repeat;
}
.WdateDiv .NavImgl a{
float:left;
background:url(img.gif) no-repeat -16px 0px;
}
.WdateDiv .NavImgr a{
float:right;
background:url(img.gif) no-repeat -32px 0px;
}
.WdateDiv .NavImgrr a{
float:right;
background:url(img.gif) no-repeat -48px 0px;
}
/****************************
* 年份月份相关
***************************/
/* 年份月份栏 DIV */
.WdateDiv #dpTitle{
height:24px;
padding:1px;
border:#c5d9e8 1px solid;
background:url(bg.jpg);
margin-bottom:2px;
}
/* 年份月份输入框 INPUT */
.WdateDiv .yminput{
margin-top:2px;
text-align:center;
border:0px;
height:20px;
width:50px;
color:#034c50;
background-color:transparent;
cursor:pointer;
}
/* 年份月份输入框获得焦点时的样式 INPUT */
.WdateDiv .yminputfocus{
margin-top:2px;
text-align:center;
border:#939393 1px solid;
font-weight:bold;
color:#034c50;
height:20px;
width:50px;
}
/* 菜单选择框 DIV */
.WdateDiv .menuSel{
z-index:1;
position:absolute;
background-color:#FFFFFF;
border:#A3C6C8 1px solid;
display:none;
}
/* 菜单的样式 TD */
.WdateDiv .menu{
cursor:pointer;
background-color:#fff;
color:#11777C;
}
/* 菜单的mouseover样式 TD */
.WdateDiv .menuOn{
cursor:pointer;
background-color:#BEEBEE;
}
/* 菜单无效时的样式 TD */
.WdateDiv .invalidMenu{
color:#aaa;
}
/* 年选择框的偏移 DIV */
.WdateDiv .YMenu{
margin-top:20px;
}
/* 月选择框的偏移 DIV */
.WdateDiv .MMenu{
margin-top:20px;
*width:62px;
}
/* 时选择框的位置 DIV */
.WdateDiv .hhMenu{
margin-top:-90px;
margin-left:26px;
}
/* 分选择框的位置 DIV */
.WdateDiv .mmMenu{
margin-top:-46px;
margin-left:26px;
}
/* 秒选择框的位置 DIV */
.WdateDiv .ssMenu{
margin-top:-24px;
margin-left:26px;
}
/****************************
* 周相关
***************************/
.WdateDiv .Wweek {
text-align:center;
background:#DAF3F5;
border-right:#BDEBEE 1px solid;
}
/****************************
* 星期,日期相关
***************************/
/* 星期栏 TR */
.WdateDiv .MTitle{
color:#13777e;
background-color:#bdebee;
}
.WdateDiv .WdayTable2{
border-collapse:collapse;
border:#BEE9F0 1px solid;
}
.WdateDiv .WdayTable2 table{
border:0;
}
/* 日期栏表格 TABLE */
.WdateDiv .WdayTable{
line-height:20px;
color:#13777e;
background-color:#edfbfb;
border:#BEE9F0 1px solid;
}
.WdateDiv .WdayTable td{
text-align:center;
}
/* 日期格的样式 TD */
.WdateDiv .Wday{
cursor:pointer;
}
/* 日期格的mouseover样式 TD */
.WdateDiv .WdayOn{
cursor:pointer;
background-color:#74d2d9 ;
}
/* 周末日期格的样式 TD */
.WdateDiv .Wwday{
cursor:pointer;
color:#ab1e1e;
}
/* 周末日期格的mouseover样式 TD */
.WdateDiv .WwdayOn{
cursor:pointer;
background-color:#74d2d9;
}
.WdateDiv .Wtoday{
cursor:pointer;
color:blue;
}
.WdateDiv .Wselday{
background-color:#A7E2E7;
}
.WdateDiv .WspecialDay{
background-color:#66F4DF;
}
/* 其他月份的日期 */
.WdateDiv .WotherDay{
cursor:pointer;
color:#0099CC;
}
/* 其他月份的日期mouseover样式 */
.WdateDiv .WotherDayOn{
cursor:pointer;
background-color:#C0EBEF;
}
/* 无效日期的样式,即在日期范围以外日期格的样式,不能选择的日期 */
.WdateDiv .WinvalidDay{
color:#aaa;
}
/****************************
* 时间相关
***************************/
/* 时间栏 DIV */
.WdateDiv #dpTime{
float:left;
margin-top:3px;
margin-right:30px;
}
/* 时间文字 SPAN */
.WdateDiv #dpTime #dpTimeStr{
margin-left:1px;
color:#497F7F;
}
/* 时间输入框 INPUT */
.WdateDiv #dpTime input{
height:20px;
width:18px;
text-align:center;
color:#333;
border:#61CAD0 1px solid;
}
/* 时间 时 INPUT */
.WdateDiv #dpTime .tB{
border-right:0px;
}
/* 时间 分和间隔符 ':' INPUT */
.WdateDiv #dpTime .tE{
border-left:0;
border-right:0;
}
/* 时间 秒 INPUT */
.WdateDiv #dpTime .tm{
width:7px;
border-left:0;
border-right:0;
}
/* 时间右边的向上按钮 BUTTON */
.WdateDiv #dpTime #dpTimeUp{
height:10px;
width:13px;
border:0px;
background:url(img.gif) no-repeat -32px -16px;
}
/* 时间右边的向下按钮 BUTTON */
.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;
margin-top:3px;
}
.WdateDiv .dpButton{
height:20px;
width:45px;
margin-top:2px;
border:#38B1B9 1px solid;
background-color:#CFEBEE;
color:#08575B;
}
\ No newline at end of file
... ...
* {
margin: 0;
padding: 0;
}
body {
background: #5b5b5b;
color: #000;
text-align: center;
line-height: 1.6;
}
body, input, select, textarea, table {
font-family: "ËÎÌå",Arial, Simsun, Verdana, sans-serif;
font-size: 9pt;
color:#333;
}
img {
border: none;
}
a {
color: #4264BD;
}
li {
line-height:20px;
}
.dCenter {
width: 800px;
margin: 0 auto;
text-align: left;
}
.dBody{
background:url("../images/body.jpg") repeat-y top;
}
.nav {
list-style:none;
float: right;
margin-right: 25px;
}
.nav li {
margin-left: 20px;
float: left;
}
.navbar {
height: 0px;
line-height: 28px;
margin-bottom: 6px;
color: #fff;
font-size: 14px;
}
.navbar a {
color: #fff;
text-decoration: none;
}
.navbar a:hover {
text-decoration: none;
color: #ccc;
}
.res-block {
BACKGROUND: url("../images/block/block-top.gif") no-repeat; MARGIN-BOTTOM: 15px; WIDTH: 210px; PADDING-TOP: 5px
}
.res-block-inner {
PADDING-RIGHT: 11px; PADDING-LEFT: 11px; BACKGROUND: url("../images/block/block-body.gif") repeat-y left; PADDING-BOTTOM: 6px; PADDING-TOP: 6px
}
.res-block-bottom {
BACKGROUND: url("../images/block/block-bottom.gif") no-repeat; WIDTH: 210px;height:5px;
}
.res-block H3 {
MARGIN-BOTTOM: 8px; FONT: bold 12px ËÎÌå,tahoma,arial,sans-serif; COLOR: #555
}
.res-block UL {
FONT: 12px tahoma,arial,sans-serif; MARGIN-LEFT: 15px; COLOR: #555; LIST-STYLE-TYPE: disc
}
.res-block UL LI {
MARGIN: 0px 0px 5px 3px
}
#footer {
background:url("../images/footer.jpg") no-repeat;
height:47px;
text-align:center;
padding-top:9px;
color:#CCC;
font-family:Arial;
}
#footer a {
color: #DDD;
text-decoration: none;
}
/*.logo {
float: left;
margin: 6px 0 0 13px;
}
#footer {
margin-bottom: 25px;
line-height: normal;
color: #666;
text-align: center;
clear: both;
}
#footer a {
color: #666;
}
#footer a{text-decoration:none;}
#footer a:hover{text-decoration:underline;color:#333;}
* html .mmlink{width:200px;float:right;margin-right:250px;}
.mmlink{width:250px;float:right;margin-right:450px; }
*/
\ No newline at end of file
... ...
<script language="javascript" type="text/javascript" src="../WdatePicker.js"></script>
<input class="Wdate" type="text" onClick="WdatePicker()"> <font color=red>&lt;- 点我弹出日期控件</font>
<script src="${ctxStatic}/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<input id="inputDate" name="inputDate" type="text" readonly="readonly"
value="<fmt:formatDate value="${article.inputDate}" pattern="yyyy-MM-dd HH:mm:ss" maxlength="20" class="input-medium Wdate"/>"
onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false,startDate:'%y-%M-01 00:00:00',alwaysUseStartDate:true});"/>
<br><br><br><br>
更多demo请访问官方主页 <a href="http://www.my97.net">http://www.my97.net</a>
<br><br>
<h1>请务必仔细阅读下面的文字</h1><br>
<pre>
注意:此版本为 4.8 Beta2 build 20111221
更新内容:
[新增]preload预载选项
[增强]验证功能可被关闭errDealMode=-1
[修改]调整周算法模式,新增weekMethod属性
[修改]去除My97DatePicker.htm
[修改]position改成相对坐标(原来为绝对坐标)
[修正]跨域错误问题
[修正]onchange不能触发的问题
[修正]兼容Safari5
[修正]&lt;script&gt;空标签时的错误
[修正]平面模式下的几个偶发问题
[修正]双月日历下跨年选择出错的问题
[修正]修正复杂iframe下,弹出位置偏移的问题(很偶发的情况)
使用方法:
1. 去官方网站看看,你当前下载的是否是最新的版本,很多bug都是因为使用的不是最新版本造成的
官方主页:<a href="http://www.my97.net" target="_blank">http://www.my97.net</a>
2. 将My97DatePicker整个目录包,放入您的项目的相应目录下
My97DatePicker目录下各文件的作用:
1.1 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
1.2 各目录及文件的用途:
WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名
calendar.js 日期库主文件,无需引入
目录lang 存放语言文件,你可以根据需要清理或添加语言文件
目录skin 存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包
3. 您可以根据您自己的需要,删除不必要的皮肤和语言文件
4. 您可以根据您自己的需要,添加新的皮肤包
皮肤中心地址:<a href="http://www.my97.net/dp/skin.asp" target="_blank">http://www.my97.net/dp/skin.asp</a>
5. 详细阅读在线演示和使用说明,大部分问题都可以通过这里解决,请细看
在线演示:<a href="http://www.my97.net/dp/demo/" target="_blank">http://www.my97.net/dp/demo/</a>
6. 如果遇到无法解决的问题
请先参考:<a href="http://www.my97.net/dp/support.asp" target="_blank">http://www.my97.net/dp/support.asp</a>
7. 如果遇到问题,而技术支持页面无法解决的
您可以通过技术支持页面中提供的联系方式联系我,注意:问问题时,一定要附上相关的HTML代码和详细的错误信息
8. 您有什么意见或建议,你可以通过技术支持页面中提供的联系方式联系我
9. 如果您对日期控件的许可协议有兴趣,您可以访问:<a href="http://www.my97.net/dp/license.asp">http://www.my97.net/dp/license.asp</a>
10.最后祝大家项目顺利,月月加薪!
---------------------------------------------------------------------
官方主页
<a href="http://www.my97.net" target="_blank">http://www.my97.net</a>
在线演示和使用说明
<a href="http://www.my97.net/dp/demo/" target="_blank">http://www.my97.net/dp/demo/</a>
皮肤中心:
<a href="http://www.my97.net/dp/skin.asp" target="_blank">http://www.my97.net/dp/skin.asp</a>
许可协议
<a href="http://www.my97.net/dp/license.asp">http://www.my97.net/dp/license.asp</a>
源代码:
<a href="http://www.my97.net/dp/source.asp" target="_blank">http://www.my97.net/dp/source.asp</a>
技术支持页面
<a href="http://www.my97.net/dp/support.asp" target="_blank">http://www.my97.net/dp/support.asp</a></pre>
... ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>My97ڿؼ ʾ & ĵ My97 DatePicker Demo & Doc</title>
<script>
window.onload = function() {
var mainFrm = document.getElementById('mainFrm');
var loc = location.href.toLowerCase()
var start=loc.indexOf('?')+1;
if(start>0){
mainFrm.src = "resource/"+loc.substr(start);
}
else{
mainFrm.src = "resource/main.asp";
}
}
</script>
</head>
<frameset rows="*" cols="242,*">
<frame src="resource/left.htm" tppabs="http://www.my97.net/dp/demo/resource/left.htm" id="leftFrm" />
<frame src="about:blank" id="mainFrm" name="mainFrm" />
</frameset>
<noframes></noframes>
</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日期控件 功能演示 常规功能 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单击或获得焦点调用外,还支持使用其他的元素如:&lt;img&gt;&lt;div&gt;等触发WdatePicker函数来调用弹出日期框</p>
<div>
<h4>示例1-1-1 常规调用</h4>
<p>
<input type="text" id="d11" onClick="WdatePicker()"/>
<br />
&lt;input id=&quot;d11&quot; type=&quot;text&quot; <span class="STYLE1">onClick=&quot;WdatePicker()&quot;</span>/&gt;</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 />
&lt;input id=&quot;<span class="STYLE1">d12</span>&quot; type=&quot;text&quot;/&gt;<br />
&lt;img onclick=&quot;WdatePicker({<span class="STYLE2">el:</span><span class="STYLE1">'d12'</span>})&quot; src=&quot;../skin/datePicker.gif&quot; width=&quot;16&quot; height=&quot;22&quot; align=&quot;absmiddle&quot;&gt;<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 />
&lt;input id=&quot;d121&quot; type=&quot;text&quot; onfocus=&quot;WdatePicker({<span class="STYLE2">isShowWeek:</span><span class="STYLE1">true</span>})&quot;/&gt;<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');}})"/>
&nbsp;&nbsp;
您选择了第
<input type="text" id="d122_1" size="3"/>
(W格式)周, 另外您可以使用WW格式:
<input type="text" id="d122_2" size="3"/>
<br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d122&quot; onFocus=&quot;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>})&quot;/&gt;<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 />
&lt;input class=&quot;Wdate&quot; type=&quot;text&quot; id=&quot;d15&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">isShowClear:</span><span class="STYLE1">false</span>,<span class="STYLE2">readOnly:</span><span class="STYLE1">true</span>})&quot;/&gt;</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 />
&lt;input class=&quot;Wdate&quot; type=&quot;text&quot; id=&quot;d16&quot; onfocus=&quot;WdatePicker({<span class="STYLE2">position:</span><span class="STYLE1">{left:100,top:50}</span>})&quot;/&gt;<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 />
&lt;input class=&quot;Wdate&quot; type=&quot;text&quot; id=&quot;d17&quot; onfocus=&quot;WdatePicker({<span class="STYLE2">firstDayOfWeek:</span><span class="STYLE1">1</span>})&quot;/&gt;<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">&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>
... ...
<!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>2. 特色功能 <a name="m22" id="m22"></a></h3>
<ol>
<li>平面显示
<a name="m221" id="m221"></a>
<p>日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上</p>
<br />
<div>
<h4>示例2-1 平面显示演示</h4>
<div id="div1" style="border:0;padding:5px"></div>
<script>
WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr())}})
</script>
<p> &lt;div id=&quot;<span class="STYLE1">div1</span>&quot;&gt;&lt;/div&gt;<br />
&lt;script&gt;<br />
WdatePicker({<span class="STYLE2">eCont:</span><span class="STYLE1">'div1'</span>,onpicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr())}})<br />
&lt;/script&gt;<br />
<br />
$dp.cal.getDateStr 用法详见<a href="999.asp.htm#m5" tppabs="http://www.my97.net/dp/demo/resource/999.asp#m5">内置函数和属性</a></p>
</div>
</li>
<li>支持多种容器
<a name="m222" id="m222"></a>
<p>除了可以将值返回给input以外,还可以通过配置el属性将值返回给其他的元素(如:textarea,div,span)等,带有innerHTML属性的HTML元素</p>
<div>
<h4>示例2-2 将日期返回到&lt;span&gt;</h4>
<p><span id="demospan">2008-01-01</span> <img onClick="WdatePicker({el:'demospan'})" src="../../../skin/datePicker.gif" tppabs="http://www.my97.net/dp/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" /><br />
<br />
代码:<br />
&lt;span id=&quot;<span class="STYLE1">demospan</span>&quot;&gt;2008-01-01&lt;/span&gt; <br />
&lt;img onClick=&quot;WdatePicker({<span class="STYLE2">el:</span><span class="STYLE1">'demospan'</span>})&quot; src=&quot;../../../skin/datePicker.gif&quot; width=&quot;16&quot; height=&quot;22&quot; align=&quot;absmiddle&quot; style=&quot;cursor:pointer&quot; /&gt;</p>
</div>
</li>
<li>起始日期功能 <a name="m223" id="m223"></a><br />
<span class="STYLE1">注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致</span>
<p>有时在项目中需要选择生日之类的日期,而默认点开始日期都是当前日期,导致年份选择非常麻烦,你可以通过起始日期功能加上配置alwaysUseStartDate属性轻松解决此类问题</p>
<div>
<h4>示例2-3-1 起始日期简单应用 </h4>
<p>默认的起始日期为 1980-05-01<br />
当日期框<span class="STYLE2">为空值时</span>,将使用 1980-05-01 做为起始日期 <br />
<br />
<input type="text" id="d221" onFocus="WdatePicker({startDate:'1980-05-01'})"/>
<br />
&lt;input type=&quot;text&quot; id=&quot;d221&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">startDate:</span><span class="STYLE1">'1980-05-01'</span>})&quot;/&gt;</p>
</div>
<div>
<h4>示例2-3-2 alwaysUseStartDate属性应用</h4>
<p>默认的起始日期为 1980-05-01<br />
当日期框<span class="STYLE2">无论是何值</span>,始终使用 1980-05-01 做为起始日期 <br />
<br />
<input type="text" id="d222" onfocus="WdatePicker({startDate:'1980-05-01',alwaysUseStartDate:true})"/>
<br />
&lt;input type=&quot;text&quot; id=&quot;d222&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">startDate:</span><span class="STYLE1">'1980-05-01'</span>,<span class="STYLE2">alwaysUseStartDate:</span><span class="STYLE1">true</span>})&quot;/&gt;</p>
</div>
<div>
<h4>示例2-3-3 使用内置参数</h4>
<p>除了使用静态的日期值以外,还可以使用动态参数(如:%y,%M分别表示当前年和月)<br />
<br />
下例演示,<span class="STYLE2">年月日使用当年当月的1日,时分秒使用00:00:00作为起始时间</span><br />
<br />
<input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>
<br />
&lt;input type=&quot;text&quot; id=&quot;d233&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">startDate:</span><span class="STYLE1">'%y-%M-01 00:00:00'</span>,dateFmt:'yyyy-MM-dd HH:mm:ss',<span class="STYLE2">alwaysUseStartDate:</span><span class="STYLE1">true</span>})&quot;/&gt;</p>
</div>
</li>
<li>自定义格式
<a name="m224" id="m224"></a>
<p>yMdHmswW分别代表年月日时分秒星期周,你可以任意组合这些元素来自定义你个性化的日期格式. </p>
<br />
日期格式表
<table width="100%" border="0" cellspacing="1" bgcolor="#000000">
<tr>
<th width="12%">格式</th>
<th width="88%">说明</th>
</tr>
<tr>
<td align="center">y</td>
<td>将年份表示为最多两位数字。如果年份多于两位数,则结果中仅显示两位低位数。</td>
</tr>
<tr>
<td align="center">yy </td>
<td>同上,如果小于两位数,前面补零。</td>
</tr>
<tr>
<td align="center">yyy</td>
<td>将年份表示为三位数字。如果少于三位数,前面补零。</td>
</tr>
<tr>
<td align="center">yyyy</td>
<td>将年份表示为四位数字。如果少于四位数,前面补零。</td>
</tr>
<tr>
<td align="center">M</td>
<td>将月份表示为从 1 至 12 的数字</td>
</tr>
<tr>
<td align="center">MM</td>
<td>同上,如果小于两位数,前面补零。</td>
</tr>
<tr>
<td align="center">MMM</td>
<td>返回月份的缩写 一月 至 十二月 (英文状态下 Jan to Dec) 。</td>
</tr>
<tr>
<td align="center">MMMM</td>
<td>返回月份的全称 一月 至 十二月 (英文状态下 January to December) 。</td>
</tr>
<tr>
<td align="center">d</td>
<td>将月中日期表示为从 1 至 31 的数字。</td>
</tr>
<tr>
<td align="center">dd</td>
<td>同上,如果小于两位数,前面补零。</td>
</tr>
<tr>
<td align="center">H </td>
<td>将小时表示为从 0 至 23 的数字。</td>
</tr>
<tr>
<td align="center">HH</td>
<td>同上,如果小于两位数,前面补零。</td>
</tr>
<tr>
<td align="center">m</td>
<td>将分钟表示为从 0 至 59 的数字。</td>
</tr>
<tr>
<td align="center">mm</td>
<td>同上,如果小于两位数,前面补零。</td>
</tr>
<tr>
<td align="center">s</td>
<td>将秒表示为从 0 至 59 的数字。</td>
</tr>
<tr>
<td align="center">ss</td>
<td>同上,如果小于两位数,前面补零。</td>
</tr>
<tr>
<td align="center">w</td>
<td>返回星期对应的数字 0 (星期天) - 6 (星期六) 。</td>
</tr>
<tr>
<td align="center">D</td>
<td>返回星期的缩写 一 至 六 (英文状态下 Sun to Sat) 。</td>
</tr>
<tr>
<td align="center">DD</td>
<td>返回星期的全称 星期一 至 星期六 (英文状态下 Sunday to Saturday) 。</td>
</tr>
<tr>
<td align="center">W</td>
<td>返回周对应的数字 (1 - 53) 。</td>
</tr>
<tr>
<td align="center">WW</td>
<td>同上,如果小于两位数,前面补零 (01 - 53) 。</td>
</tr>
</table>
<br />
示例<br />
<table width="100%" border="0" cellspacing="1" bgcolor="#000000">
<tr>
<th width="191">格式字符串</th>
<th width="460"></th>
</tr>
<tr>
<td>yyyy-MM-dd HH:mm:ss</td>
<td>2008-03-12 19:20:00</td>
</tr>
<tr>
<td>yy年M月</td>
<td>08年3月</td>
</tr>
<tr>
<td>yyyyMMdd</td>
<td>20080312</td>
</tr>
<tr>
<td>今天是:yyyy年M年d HH时mm分 </td>
<td>今天是:2008年3月12日 19时20分</td>
</tr>
<tr>
<td>H:m:s</td>
<td>19:20:0</td>
</tr>
<tr>
<td>y年</td>
<td>8年</td>
</tr>
<tr>
<td>MMMM d, yyyy</td>
<td>三月 12, 2008</td>
</tr>
</table>
<div>
<h4>示例 2-4-1: 年月日时分秒</h4>
<p>
<input type="text" id="d241" onfocus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'})" class="Wdate" style="width:300px"/>
<br />
&lt;input type=&quot;text&quot; id=&quot;d241&quot; onfocus=&quot;WdatePicker({<span class="STYLE2">dateFmt:</span><span class="STYLE1">'yyyy年MM月dd日 HH时mm分ss秒'</span>})&quot; class=&quot;Wdate&quot; style=&quot;width:300px&quot;/&gt;<br />
<br />
<span class="STYLE1">注意:</span>点两次才能选择日期的原因,详见 <a href="3.asp.htm#autopickdate" tppabs="http://www.my97.net/dp/demo/resource/3.asp#autopickdate">autoPickDate</a> 属性</p>
</div>
<div>
<h4>示例 2-4-2 时分秒</h4>
<p>
<input type="text" id="d242" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})" class="Wdate"/>
<br />
&lt;input type=&quot;text&quot; id=&quot;d242&quot; onfocus=&quot;WdatePicker({skin:'whyGreen',<span class="STYLE2">dateFmt:</span><span class="STYLE1">'H:mm:ss'</span>})&quot; class=&quot;Wdate&quot;/&gt;<br />
<br />
<span class="STYLE1">注意:</span>这里提前使用了皮肤(skin)属性,所以你会看到一个不同的皮肤,皮肤属性详见<a href="2.3.asp.htm#m232" tppabs="http://www.my97.net/dp/demo/resource/2.3.asp#m232">自定义和动态切换皮肤</a> </p>
</div>
<div>
<h4>示例 2-4-3 年月</h4>
<p>
<input type="text" id="d243" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月'})" class="Wdate"/>
<br />
&lt;input type=&quot;text&quot; id=&quot;d243&quot; onfocus=&quot;WdatePicker({skin:'whyGreen',<span class="STYLE2">dateFmt:</span><span class="STYLE1">'yyyy年MM月'</span>})&quot; class=&quot;Wdate&quot;/&gt;</p>
</div>
<div>
<h4>示例 2-4-4 取得系统可识别的日期值<span class="STYLE1">(重要)</span></h4>
<p>类似于 1999年7月5日 这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如 1999-07-05 <br />
<br />
<input id="d244" type="text" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>
真实的日期值是:
<input id="d244_2" type="text" />
<br />
&lt;input id=&quot;d244&quot; type=&quot;text&quot; class=&quot;Wdate&quot; onfocus=&quot;WdatePicker(<span class="STYLE2">{dateFmt:</span><span class="STYLE1">'yyyy年M月d日'</span>,<span class="STYLE2">vel:</span><span class="STYLE1">'d244_2'</span>})&quot;/&gt;<br />
&lt;input id=&quot;<span class="STYLE1">d244_2</span>&quot; type=&quot;text&quot; /&gt;<br />
<br />
<span class="STYLE1">注意:</span>在实际应用中,一般会把vel指定为一个<span class="STYLE2">hidden控件</span>,这里是为了把真实值展示出来,所以使用文本框<br />
<span class="STYLE1">关键属性:</span> <span class="STYLE2">vel</span> 指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)</p>
</div>
<div>
<h4>示例 2-4-5 星期, 月 日, 年<span class="STYLE1">(4.6新增)</span></h4>
<p>
<input type="text" id="d245" style="width:200px" onfocus="WdatePicker({dateFmt:'DD, MMMM d, yyyy'})" class="Wdate"/>
<br />
&lt;input type=&quot;text&quot; id=&quot;d245&quot; onfocus=&quot;WdatePicker({<span class="STYLE2">dateFmt:</span><span class="STYLE1">'DD, MMMM d, yyyy'</span>})&quot; class=&quot;Wdate&quot;/&gt;</p>
</div>
</li>
<li> 双月日历功能<span class="STYLE1">(4.6新增)</span> <a name="m225" id="m225"></a>
<p>可以同时弹出两个月的日历</p>
<div>
<h4>示例2-5 双月日历功能</h4>
<p>
<input class="Wdate" type="text" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"/>
<br />
&lt;input class=&quot;Wdate&quot; type=&quot;text&quot; onfocus=&quot;WdatePicker({<span class="STYLE2">doubleCalendar:</span><span class="STYLE1">true</span>,dateFmt:'yyyy-MM-dd'})&quot;/&gt;<br />
<br />
<span class="STYLE1">注意:</span>双月日历一般只用于包含年月日三个元素的场景,另外设置该属性时,autoPickDate自动设置为true</p>
</div>
</li>
<li>自动纠错功能
<a name="m226" id="m226"></a>
<p>纠错处理可设置为3种模式:提示(默认) 自动纠错 标记,当日期框中的值不符合格式时,系统会尝试自动修复,如果修复失败会根据您设置的纠错处理模式进行处理,错误判断功能非常智能它可以保证用户输入的值是一个合法的值</p>
<div>
<h4>示例2-6-1 不合法的日期演示</h4>
<p>请在下面的日期框中<span class="STYLE2">填入一个不合法的日期(如:1997-02-29)</span>,再<span class="STYLE2">尝试离开焦点</span><br />
使用默认容错模式 <span class="STYLE2">提示模式</span> errDealMode = 0 在输入错误日期时,会先<span class="STYLE2">提示</span> <br />
<input type="text" class="Wdate" id="d261" onclick="WdatePicker()"/>
<br />
<br />
<span class="STYLE1">注意:</span>1997年不是闰年哦</p>
</div>
<div>
<h4>示例2-6-2 超出日期限制范围的日期也被认为是一个不合法的日期</h4>
<p>最大日期是2000-01-10 ,如果在下框中填入的日期 大于 2000-01-10(如2000-01-12)也会被认为是不合法的日期 <br />
<span class="STYLE2">自动纠错模式</span> errDealMode = 1 在输入错误日期时,<span class="STYLE2">自动恢复前一次正确的值</span><br />
<input name="text" type="text" class="Wdate" onfocus="WdatePicker({errDealMode:1,maxDate:'2000-01-10'})"/>
</p>
</div>
<div>
<h4>示例2-6-3 使用无效天和无效日期功能限制的日期也被认为是一个不合法的日期</h4>
<p>如:<br />
2008-02-20 无效日期限制<br />
2008-02-02 2008-02-09 2008-02-16 2008-02-23 无效天限制<br />
都是无效日期<br />
您可以尝试在下框中输入这些日期,并离开焦点<br />
<br />
<span class="STYLE2">标记模式</span> errDealMode = 2 在输入错误日期时,<span class="STYLE2">不做提示和更改,只是做一个标记,但此时日期框不会马上隐藏</span><br />
<input name="text2" type="text" class="Wdate" onfocus="WdatePicker({errDealMode:2,maxDate:'2010-01-10',disabledDays:[6],disabledDates:['2008-02-20']})" value="2008-02-12"/>
<br />
<br />
<span class="STYLE1">注意:</span>标记类:WdateFmtErr是在skin目录下WdatePicker.css中定义的</p>
</div>
</li>
<li>跨无限级框架显示
<a name="m227" id="m227"></a>
<p>无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的</p>
<div>
<h4>示例2-7 跨无限级框架演示</h4>
<p>可无限跨越框架iframe,无论怎么嵌套框架都不必担心了,即使有滚动条也不怕<br />
<span class="STYLE1">注意:Javascript是无法跨越frameset的,但是My97日期控件可无限跨越框架iframe,任何的frameset都可以使用iframe代替</span></p>
<iframe src="demo_iframe.htm" tppabs="http://www.my97.net/dp/demo/resource/demo_iframe.htm" width="100%" height="220px" frameborder="0"></iframe>
</div>
</li>
<li>民国年日历和其他特殊日历
<a name="m228" id="m228"></a>
<p>当年份格式设置为yyy格式时,利用年份差量属性yearOffset(默认值1911民国元年),可实现民国年日历和其他特殊日历</p>
<div>
<h4>示例2-8 民国年演示</h4>
<p>
<input type="text" id="d28" onClick="WdatePicker({dateFmt:'yyy/MM/dd'})"/>
<br />
&lt;input type=&quot;text&quot; id=&quot;d28&quot; onClick=&quot;WdatePicker({<span class="STYLE2">dateFmt:</span><span class="STYLE1">'yyy/MM/dd'</span>})&quot;/&gt;<br />
<br />
<span class="STYLE1">注意:</span>年份格式设置成yyy时,真正的日期将会减去一个差量<span class="STYLE2">yearOffset(默认值为:1911)</span>,如果是民国年使用默认值即可无需另外配置,如果是其他的差量,可以通过参数的形式配置</p>
</div>
</li>
<li>编辑功能 <a name="m229" id="m229"></a>
<p>当日期框里面有值时,修改完某个属性后,只要点击这个按钮就可以实现时间和日期的编辑</p>
<div>
<h4>示例2-9 日期和时间的编辑演示</h4>
<p>您可以尝试对下面框中的月份改为1,然后点击<span class="STYLE2">更新</span>,你会发现日期由 2000-<span class="STYLE1">02</span>-29 01:00:00 变为 2000-<span class="STYLE1">01</span>-29 01:00:00<br />
<input class="Wdate" type="text" style="width:200px" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" value="2000-02-29 01:00:00"/>
</p>
</div>
</li>
<li>为编程带来方便
<a name="m22a" id="m22a"></a>
<p>如果el的值是this,可省略,即所有的el:this都可以不写 <br />
日期框设置为disabled时,禁止更改日期(不弹出选择框) <br />
如果没有定义onpicked事件,自动触发文本框的onchange事件 <br />
如果没有定义oncleared事件,清空时,自动触发onchange事件</p>
</li>
<li>其他属性
<a name="m22b" id="m22b"></a>
<p>设置readOnly属性,可指定日期框是否只读 <br />
设置highLineWeekDay属性,可指定是否高亮周末 <br />
设置isShowOthers属性,可指定是否显示其他月的日期 <br />
加上class="Wdate"就会在选择框右边出现日期图标</p>
</li>
</ol>
<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">&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>
... ...
<!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>3. 多语言和自定义皮肤<a name="m23" id="m23"></a></h3>
<br />
<ol>
<li>多语言支持
<a name="m231" id="m231"></a>
<p>通过lang属性,可以为每个日期控件单独配置语言,当然也可以通过WdatePicker.js配置全局的语言<br />
语言列表和语言安装说明详见<a href="3.asp.htm#m32" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m32">语言配置</a></p>
<div>
<h4>示例3-1 多语言示例 </h4>
<p>繁体中文:
<input name="text3" type="text" class="Wdate" id="d311" onfocus="WdatePicker({lang:'zh-tw'})"/>
<br />
&lt;input id=&quot;d311&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onFocus=&quot;WdatePicker({<span class="STYLE1">lang:</span><span class="STYLE2">'zh-tw'</span>})&quot;/&gt;</p>
<p> 英文:
<input name="text3" type="text" class="Wdate" id="d312" onfocus="WdatePicker({lang:'en'})"/>
<br />
&lt;input id=&quot;d312&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onFocus=&quot;WdatePicker({<span class="STYLE1">lang:</span><span class="STYLE2">'en'</span>})&quot;/&gt;</p>
<p>简体中文:
<input name="text3" type="text" class="Wdate" id="d313" onfocus="WdatePicker({lang:'zh-cn'})"/>
<br />
&lt;input id=&quot;d313&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onFocus=&quot;WdatePicker({<span class="STYLE1">lang:</span><span class="STYLE2">'zh-cn'</span>})&quot;/&gt;<br />
<br />
<span class="STYLE1">注意:</span>默认情况lang='auto',即根据浏览器的语言自动选择语言.<br />
<br />
<span class="STYLE1">技巧:</span>很多项目中,可能有固定的语言选项,希望可以在日期选择的属性设置中强制某种语言,即:可以通过后台代码控制语言的选择,其实这个实现起来是很容易的,My97Datepicker是支持多个配置文件共存的,你可以配置类似cn_WdatePicker.js,en_WdatePicker.js(注意命名规则,必须以WdatePicker.js结尾)等等,在这些WdatePicker.js里面设置不同的默认语言,皮肤,格式等其他可以设置的参数,然后在页面里根据你的系统变量引入不同的xx_WdatePicker.js即可<br />
</p>
</div>
</li>
<li>自定义和动态切换皮肤
<a name="m232" id="m232"></a>
<a href="javascript:if(confirm('http://www.my97.net/dp/skin.asp \n\n该文件未被 Teleport Pro 下载,因为 它位于起始地址以设置的边界以外的域或路径中。 \n\n你想要从服务器打开它吗?'))window.location='http://www.my97.net/dp/skin.asp'" tppabs="http://www.my97.net/dp/skin.asp" target="_top" class="STYLE1">立刻转到皮肤中心</a>
<p>通过skin属性,可以为每个日期控件单独配置皮肤,当然也可以通过WdatePicker.js配置全局的皮肤<br />
皮肤列表和皮肤安装说明详见<a href="3.asp.htm#m33" tppabs="http://www.my97.net/dp/demo/resource/3.asp#m33">皮肤配置</a></p>
<div>
<h4>示例3-2 皮肤演示</h4>
<p><b>默认皮肤default</b>: skin:'default'<br />
<input id="d321" class="Wdate" type="text" onfocus="WdatePicker()"/>
<br />
&lt;input id=&quot;d321&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onfocus=&quot;WdatePicker()&quot;/&gt;<br />
<br />
<span class="STYLE1">注意:</span>在WdatePicker里配置了skin='default',所以此处可省略,同理,如果你把WdatePicker里的skin配置成'whyGreen'那么在不指定皮肤的情况下都使用'whyGreen'皮肤了</p>
<p><br />
<b>whyGreen皮肤</b>: skin:'whyGreen' <font color="#FF0000"><br />
</font>
<input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen'})"/>
<br />
&lt;input id=&quot;d322&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onfocus=&quot;WdatePicker({<span class="STYLE2">skin:</span><span class="STYLE1">'whyGreen'</span>})&quot;/&gt;<br/><br/>
<span class="STYLE1">注意:</span>更多皮肤,请到<a href="javascript:if(confirm('http://www.my97.net/dp/skin.asp \n\n该文件未被 Teleport Pro 下载,因为 它位于起始地址以设置的边界以外的域或路径中。 \n\n你想要从服务器打开它吗?'))window.location='http://www.my97.net/dp/skin.asp'" tppabs="http://www.my97.net/dp/skin.asp" target="_top">皮肤中心</a>下载</p>
</div>
</li>
</ol>
<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">&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>
... ...
<!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>4. 日期范围限制<a name="m24" id="m24"></a></h3>
<oL>
<LI>静态限制<a name="m241" id="m241"></a><br />
<span class="STYLE1">注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致</span>
<p>你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围</p><div>
<h4>示例4-1-1 限制日期的范围是 2006-09-10到2008-12-20</h4>
<p><input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/><br />
&lt;input id=&quot;d411&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onfocus=&quot;WdatePicker({skin:'whyGreen',<span class="STYLE2">minDate:</span><span class="STYLE1">'2006-09-10',</span><span class="STYLE2">maxDate:</span><span class="STYLE1">'2008-12-20'</span>})&quot;/&gt;</p>
</div><div>
<h4>示例4-1-2 限制日期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30</h4>
<p><input type="text" class="Wdate" id="d412" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})" value="2008-03-09 11:00:00"/><br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d412&quot; onfocus=&quot;WdatePicker({skin:'whyGreen',<span class="STYLE2">dateFmt:</span><span class="STYLE1">'yyyy-MM-dd HH:mm:ss',</span><span class="STYLE2">minDate:</span><span class="STYLE1">'2008-03-08 11:30:00',</span><span class="STYLE2">maxDate:</span><span class="STYLE1">'2008-03-10 20:59:30'</span>})&quot; value=&quot;2008-03-09 11:00:00&quot;/&gt;</p>
</div><div>
<h4>示例4-1-3 限制日期的范围是 2008年2月 到 2008年10月</h4>
<p><input type="text" class="Wdate" id="d413" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'2008-10'})"/><br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d413&quot; onfocus=&quot;WdatePicker({<span class="STYLE2">dateFmt:</span><span class="STYLE1">'yyyy年M月',</span><span class="STYLE2">minDate:</span><span class="STYLE1">'2008-2',</span><span class="STYLE2">maxDate:</span><span class="STYLE1">'2008-10'</span>})&quot;/&gt;</p>
</div><div>
<h4>示例4-1-4 限制日期的范围是 8:00:00 到 11:30:00</h4>
<p><input type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/><br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d414&quot; onfocus=&quot;WdatePicker({<span class="STYLE2">dateFmt:</span><span class="STYLE1">'H:mm:ss',</span><span class="STYLE2">minDate:</span><span class="STYLE1">'8:00:00',</span><span class="STYLE2">maxDate:</span><span class="STYLE1">'11:30:00'</span>})&quot;/&gt;</p>
</div></LI>
<LI>动态限制<a name="m242" id="m242"></a><br />
<span class="STYLE1">注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致</span>
<p>你可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,你还可以通过{}进行表达式运算,如:{%d+1}:表示明天<br />
<br />
动态变量表</p>
<table width="335" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
<tr>
<th width="62">格式</th>
<th width="258">说明</th>
</tr>
<tr>
<td align="center">%y </td>
<td>当前年</td>
</tr>
<tr>
<td align="center">%M </td>
<td>当前月</td>
</tr>
<tr>
<td align="center">%d </td>
<td>当前日</td>
</tr>
<tr>
<td align="center">%ld</td>
<td>本月最后一天</td>
</tr>
<tr>
<td align="center">%H </td>
<td>当前时</td>
</tr>
<tr>
<td align="center">%m </td>
<td>当前分</td>
</tr>
<tr>
<td align="center">%s </td>
<td>当前秒</td>
</tr>
<tr>
<td align="center">{}</td>
<td>运算表达式,如:{%d+1}:表示明天</td>
</tr>
<tr>
<td align="center">#F{}</td>
<td>{}之间是函数可写自定义JS代码</td>
</tr>
</table>
<div>
<h4>示例4-2-1 只能选择今天以前的日期(包括今天)</h4>
<p><input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/><br />
&lt;input id=&quot;d421&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onfocus=&quot;WdatePicker({skin:'whyGreen',<span class="STYLE2">maxDate:</span><span class="STYLE1">'%y-%M-%d'</span>})&quot;/&gt;</p>
</div>
<div>
<h4>示例4-2-2 <span class="STYLE2">使用了运算表达式</span> 只能选择今天以后的日期(不包括今天)</h4>
<p><input id="d422" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/><br />
&lt;input id=&quot;d422&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onfocus=&quot;WdatePicker({<span class="STYLE2">minDate:</span><span class="STYLE1">'%y-%M-{%d+1}'</span>})&quot;/&gt;</p>
</div>
<div>
<h4>示例4-2-3 只能选择本月的日期1号至本月最后一天</h4>
<p><input id="d423" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/><br />
&lt;input id=&quot;d423&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onfocus=&quot;WdatePicker({<span class="STYLE2">minDate:</span><span class="STYLE1">'%y-%M-01',</span><span class="STYLE2">maxDate:</span><span class="STYLE1">'%y-%M-%ld'</span>})&quot;/&gt;</p>
</div>
<div>
<h4>示例4-2-4 只能选择今天7:00:00至明天21:00:00的日期</h4>
<p><input id="d424" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/><br />
&lt;input id=&quot;d424&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onfocus=&quot;WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',<span class="STYLE2">minDate:</span><span class="STYLE1">'%y-%M-%d 7:00:00',</span><span class="STYLE2">maxDate:</span><span class="STYLE1">'%y-%M-{%d+1} 21:00:00'</span>})&quot;/&gt;</p>
</div>
<div>
<h4>示例4-2-5 <span class="STYLE2">使用了运算表达式</span> 只能选择 20小时前 至 30小时后 的日期</h4>
<p><input id="d425" class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/><br />
&lt;input id=&quot;d425&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onClick=&quot;WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',<span class="STYLE2">minDate:</span><span class="STYLE1">'%y-%M-%d {%H-20}:%m:%s'</span>,<span class="STYLE2">maxDate:</span><span class="STYLE1">'%y-%M-%d {%H+30}:%m:%s'</span>})&quot;/&gt;</p>
</div>
</LI>
<LI>脚本自定义限制<a name="m243" id="m243"></a><br />
<span class="STYLE1">注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致</span>
<p>系统提供了$dp.$D和$dp.$DV这两个API来辅助你进行日期运算,此外你还可以通过在 #F{} 中填入你自定义的脚本,做任何你想做的日期限制</p><div>
<h4>示例4-3-1 前面的日期不能大于后面的日期且两个日期都不能大于 2020-10-01</h4>
<p>合同有效期从
<input type="text" class="Wdate" id="d4311" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/>
<input type="text" class="Wdate" id="d4312" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>
<br />
&lt;input id=&quot;d4311&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">maxDate:</span><span class="STYLE1">'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'</span>})&quot;/&gt; <br />
&lt;input id=&quot;d4312&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">minDate:</span><span class="STYLE1">'#F{$dp.$D(\'d4311\')}'</span>,<span class="STYLE2">maxDate:'2020-10-01'</span>})&quot;/&gt;<br />
<br />
<span class="STYLE1">注意:</span><br />
两个日期的日期格式必须相同<br />
<br />$dp.$ 相当于 document.getElementById 函数.<br />
那么为什么里面的 ' 使用 \' 呢? 那是因为 &quot; 和 ' 都被外围的函数使用了,故使用转义符 \ ,否则会提示JS语法错误.<br />
所以您在其他地方使用时注意把 \' 改成 &quot; 或者 ' 来使用.<br />
<br />
#F{$dp.$D(\'d4312\')||\'2020-10-01\'}
表示当 d4312 为空时, 采用 2020-10-01 的值作为最大值<br />
</p>
</div><div>
<h4>示例4-3-2 前面的日期+3天 不能大于 后面的日期</h4>
<p>日期从
<input type="text" class="Wdate" id="d4321" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})"/>
<input type="text" class="Wdate" id="d4322" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})"/>
<br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d4321&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">maxDate:</span><span class="STYLE1">'#F{$dp.$D(\'d4322\',{d:-3});}'</span>})&quot;/&gt;<br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d4322&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">minDate:</span><span class="STYLE1">'#F{$dp.$D(\'d4321\',{d:3});}'</span>})&quot;/&gt;<br />
<br />
使用 <span class="STYLE2">$dp.$D 函数</span> 可以将日期框中的值,加上定义的日期差量:<br />
两个参数: <span class="STYLE1">id={字符类型}需要处理的文本框的id值</span> , <span class="STYLE1">obj={对象类型}日期差量</span><br />
<span class="STYLE2">日期差量用法:</span><br />
属性y,M,d,H,m,s分别代表年月日时分秒<br />
<br />
为空时,表示直接取值,不做差量(示例4-3-1中的参数就是空的)<br />
{M:5,d:7} 表示 五个月零7天<br />
{y:1,d:-3} 表示 1年少3天<br />
{d:1,H:1} 表示一天多1小时</p>
</div><div>
<h4>示例4-3-3 前面的日期+3月零2天 不能大于 后面的日期 且 前面日期都不能大于 2020-4-3减去3月零2天 后面日期 不能大于 2020-4-3</h4>
<p>住店日期从
<input type="text" class="Wdate" id="d4331" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})"/>
<input type="text" class="Wdate" id="d4332" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d4331\',{M:3,d:2});}',maxDate:'2020-4-3'})"/>
<br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d4331&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">maxDate:</span>'<span class="STYLE1">#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}</span>'})&quot;/&gt;<br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d4332&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">minDate:</span>'<span class="STYLE1">#F{$dp.$D(\'d4331\',{M:3,d:2});}</span>',<span class="STYLE1">maxDate:</span>'<span class="STYLE1">2020-4-3</span>'})&quot;/&gt;<br />
<br />
<span class="STYLE1">注意:<br />
</span>#F{$dp.$D(\'d4332\',{M:-3,d:-2}) || $dp.$DV(\'2020-4-3\',{M:-3,d:-2})}<br />
表示当 d4332 为空时, 采用 $dp.$DV(\'2020-4-3\',{M:-3,d:-2})} 的值作为最大值</p>
<p>使用 <span class="STYLE2">$dp.$DV 函数</span> 可以将显式传入的值,加上定义的日期差量:<br />
两个参数: <span class="STYLE1">value={字符类型}需要处理的值</span> , <span class="STYLE1">obj={对象类型}日期差量</span><br />
用法同上面的 <span class="STYLE2">$dp.$D</span> 类似,如 $dp.$DV(\'2020-4-3\',{M:-3,d:-2}) 表示 2020-4-3减去3月零2天</p>
</div><div>
<h4>示例4-3-4 发挥你的JS才能,定义任何你想要的日期限制</h4>
<p>自动转到随机生成的一天,当然,此示例没有实际的用途,只是为演示目的<br />
<script>
//返回一个随机的日期
function randomDate(){
var Y = 2000 + Math.round(Math.random() * 10);
var M = 1 + Math.round(Math.random() * 11);
var D = 1 + Math.round(Math.random() * 27);
return Y+'-'+M+'-'+D;
}
</script>
<input type="text" class="Wdate" id="d434" onfocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date})"/>
<br />
&lt;script&gt;<br />
//返回一个随机的日期<br />
function randomDate(){<br />
var Y = 2000 + Math.round(Math.random() * 10);<br />
var M = 1 + Math.round(Math.random() * 11);<br />
var D = 1 + Math.round(Math.random() * 27);<br />
return Y+'-'+M+'-'+D;<br />
}<br />
&lt;/script&gt;<br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d434&quot; onFocus=&quot;<span class="STYLE1">var date=randomDate();WdatePicker({minDate:date,maxDate:date})</span>&quot;/&gt;</p>
</div>
</LI>
<LI>无效天<a name="m244" id="m244"></a>
<p>可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表 周日至周六)</p><div>
<h4>示例4-4-1 禁用 周六 所对应的日期</h4>
<p><input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/><br />
&lt;input id=&quot;d441&quot; type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">disabledDays:</span><span class="STYLE1">[6]</span>})&quot;/&gt;</p>
</div><div>
<h4>示例4-4-2 禁用 周六 周日 所对应的日期</h4>
<p><input id="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/><br />
&lt;input id=&quot;d442&quot; type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">disabledDays:</span><span class="STYLE1">[0,6]</span>})&quot;/&gt;</p>
</div>
</LI>
<LI>无效日期<a name="m245" id="m245"></a><br />
<span class="STYLE1">注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致</span>
<p>可以使用此功能禁用,所指定的一个或多个日期,只要你熟悉正则表达式,你可以尽情发挥<br /><br />
<span class="STYLE2">用法(正则匹配):</span> <br />
如果你熟悉正则表达式,会很容易理解下面的匹配用法<br />
如果不熟悉,可以参考下面的常用示例 <br />
['2008-02-01','2008-02-29'] 表示禁用 2008-02-01 和 2008-02-29<br />
['2008-..-01','2008-02-29'] 表示禁用 2008-所有月份-01 和 2008-02-29<br />
['200[0-8]]-02-01','2008-02-29'] 表示禁用 [2000至2008]-02-01 和 2008-02-29<br />
['^2006'] 表示禁用 2006年的所有日期 </p>
<p>此外,您还可以使用 %y %M %d %H %m %s 等变量, 用法同动态日期限制 <span class="STYLE1">注意:%ld不能使用</span><br />
['....-..-01','%y-%M-%d'] 表示禁用 所有年份和所有月份的第一天和今天 <br />
['%y-%M-{%d-1}','%y-%M-{%d+1}'] 表示禁用 昨天和明天</p>
<p>当然,除了可以限制日期以外,您还可以限制时间<br />
['....-..-.. 10\:00\:00'] 表示禁用 每天10点 (注意 <span class="STYLE2">:</span> 需要 使用 <span class="STYLE2">\:</span> ) </p>
<p>不再多举例了,尽情发挥你的正则才能吧!</p>
<div>
<h4>示例4-5-1 禁用 每个月份的 5日 15日 25日</h4>
<p><input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/><br />
&lt;input id=&quot;d451&quot; type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">disabledDates:</span><span class="STYLE1">['5$']</span>})&quot;/&gt;<br />
<br />
<span class="STYLE1">注意
:</span><span class="STYLE2">'5$'</span> 表示以 5 结尾 注意 <span class="STYLE2">$</span> 的用法 </p>
</div><div>
<h4>示例4-5-2 禁用 所有早于2000-01-01的日期</h4>
<p><input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/><br />
&lt;input id=&quot;d452&quot; type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">disabledDates:</span><span class="STYLE1">['^19']</span>})&quot;/&gt;<br />
<br />
<span class="STYLE1">注意:</span><span class="STYLE2">'^19'</span> 表示以 19 开头 注意 <span class="STYLE2">^</span> 的用法 <br />
当然,可以使用minDate实现类似的功能 这里主要是 在演示 ^ 的用法</p>
</div><div>
<h4>示例4-5-3 配合min/maxDate使用,可以把可选择的日期分隔成多段</h4>
<p>本示例本月可用日期分隔成五段 分别是: 1-3 8-10 16-24 26,27 29-月末<br />
<input id="d453" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/><br />
&lt;input id=&quot;d453&quot; type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">minDate:</span><span class="STYLE1">'%y-%M-01'</span>,<span class="STYLE2">maxDate:</span><span class="STYLE1">'%y-%M-%ld'</span>,<span class="STYLE2">disabledDates:</span><span class="STYLE1">['0[4-7]$','1[1-5]$','2[58]$']</span>})&quot;/&gt;</p>
</div><div>
<h4>示例4-5-4 <span class="STYLE2">min/maxDate disabledDays disabledDates 配合使用</span> 即使在要求非常苛刻的情况下也能满足需求</h4>
<p><input id="d454" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$'],disabledDays:[1,3,6]})"/><br />
&lt;input id=&quot;d454&quot; type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">minDate:</span><span class="STYLE1">'%y-%M-01'</span>,<span class="STYLE2">maxDate:</span><span class="STYLE1">'%y-%M-%ld'</span>,<span class="STYLE2">disabledDates:</span><span class="STYLE1">['0[4-7]$','1[1-5]$','2[58]$']</span>,<span class="STYLE2">disabledDays:</span><span class="STYLE1">[1,3,6]</span>})&quot;/&gt;</p>
</div><div>
<h4>示例4-5-5 禁用前一个小时和后一个小时内所有时间 使用 %y %M %d %H %m %s 等变量</h4>
<p>鼠标点击 小时输入框时,你会发现当然时间对应的前一个小时和后一个小时是灰色的<br />
<input id="d2a25" type="text" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/>
<br />
&lt;input id=&quot;d2a25&quot; type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',<span class="STYLE2">disabledDates:</span><span class="STYLE1">['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']</span>})&quot;/&gt; <br />
<br />
<span class="STYLE1">注意:</span>%y %M %d等详见<a href="#m242">动态变量表</a></p>
</div><div>
<h4>示例4-5-6 #F{}也是可以使用的</h4>
<p>本示例利用自定义函数 随机禁用0-23中的任何一个小时<br />
打开小时选择框,你会发现有一个小时被禁用的,而且每次禁用的小时都不同<br />
<input type="text" class="Wdate" id="d456" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>
<script>
function randomH(){
//产生一个随机的数字 0-23
var H = Math.round(Math.random() * 23);
if(H<10) H='0'+H;
//返回 '^' + 数字
return '^'+H;
}
</script>
<br />
&lt;script&gt;<br />
function randomH(){<br />
//产生一个随机的数字 0-23 <br />
var H = Math.round(Math.random() * 23);<br />
if(H&lt;10) H='0'+H;<br />
//返回 '^' + 数字<br />
return '^'+H;<br />
}<br />
&lt;/script&gt;<br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d456&quot; onFocus=&quot;WdatePicker({dateFmt:'HH:mm:ss',<span class="STYLE2">disabledDates:</span><span class="STYLE1">['#F{randomH()}']</span>})&quot;/&gt;</p>
</div></LI>
<li>有效日期<a name="m246" id="m246"></a>
<p>使用无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效日期的功能就非常适合了.<br />
<span class="STYLE1">关键属性:</span> <span class="STYLE2">opposite</span> 默认为false, 为true时,无效日期变成有效日期,<b>该属性对无效天,特殊天不起作用</b> </p>
<div>
<h4>示例4-6 只启用 每个月份的 5日 15日 25日</h4>
<p><input id="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/><br />
&lt;input id=&quot;d46&quot; type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">opposite:</span><span class="STYLE1">true</span>,<span class="STYLE2">disabledDates:</span><span class="STYLE1">['5$']</span>})&quot;/&gt;<br />
<br />
<span class="STYLE1">注意
:</span><span class="STYLE2">'5$'</span> 表示以 5 结尾 注意 <span class="STYLE2">$</span> 的用法 </p>
</div>
</li>
<li>特殊天和特殊日期<a name="m247" id="m247"></a>
<p><span class="STYLE1">特殊天和特殊日期的用法跟完全无效天和无效日期完全相同,但是opposite属性对其无效</span><br />
<br />
<span class="STYLE1">关键属性:</span><br />
<span class="STYLE2">specialDays </span>(0至6 分别代表 周日至周六) 用法同无效天 <br />
<span class="STYLE2">specialDates</span> 用法同无效日期,但是对时分秒无效</p>
<div>
<h4>示例4-7-1 高亮每周 周一 周五</h4>
<p><input id="d471" type="text" class="Wdate" onFocus="WdatePicker({specialDays:[1,5]})"/><br />
&lt;input id=&quot;d471&quot; type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">specialDays:</span><span class="STYLE1">[1,5]</span>})&quot;/&gt; </p>
</div>
<div>
<h4>示例4-7-2 高亮每月 1号 15号</h4>
<p><input id="d472" type="text" class="Wdate" onFocus="WdatePicker({specialDates:['....-..-01','....-..-15']})"/><br />
&lt;input id=&quot;d472&quot; type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">specialDates:</span><span class="STYLE1">['....-..-01','....-..-15']</span>})&quot;/&gt; </p>
</div>
</li>
</oL>
<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">&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>
... ...
<!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 />
&lt;input type=&quot;text&quot; id=&quot;5421&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">onpicking:</span><span class="STYLE1">function(dp){if(!confirm('日期框原来的值为: '+dp.cal.getDateStr()+', 要用新选择的值:' + dp.cal.getNewDateStr() + '覆盖吗?')) return true;}</span>})&quot; class=&quot;Wdate&quot;/&gt;<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 />
&lt;input id=&quot;<span class="STYLE1">d5221</span>&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onFocus=&quot;var d5222=$dp.$('d5222');WdatePicker({<span class="STYLE2">onpicked:</span><span class="STYLE1">function(){d5222.focus();}</span>,maxDate:'#F{$dp.$D(\'d5222\')}'})&quot;/&gt;<br />
<br />
&lt;input id=&quot;<span class="STYLE1">d5222</span>&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onFocus=&quot;WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})&quot;/&gt;<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 />
&lt;input type=&quot;text&quot; id=&quot;d523_y&quot; size=&quot;5&quot;/&gt;
<br />
&lt;input type=&quot;text&quot; id=&quot;d523_M&quot; size=&quot;3&quot;/&gt;
<br />
&lt;input type=&quot;text&quot; id=&quot;d523_d&quot; size=&quot;3&quot;/&gt;
<br />
&lt;input type=&quot;text&quot; id=&quot;d523_HH&quot; size=&quot;3&quot;/&gt;
<br />
&lt;input type=&quot;text&quot; id=&quot;d523_mm&quot; size=&quot;3&quot;/&gt;
<br />
&lt;input type=&quot;text&quot; id=&quot;d523_ss&quot; size=&quot;3&quot;/&gt;
<br />
&lt;img onclick=&quot;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>})&quot; src=&quot;../../../skin/datePicker.gif&quot; width=&quot;16&quot; height=&quot;22&quot; align=&quot;absmiddle&quot; style=&quot;cursor:pointer&quot;/&gt;<br />
<span class="STYLE1">&lt;script&gt;</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">&lt;/script&gt;</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 />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d531&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">onclearing:</span><span class="STYLE1">function(){if(!confirm('日期框的值为:'+this.value+', 确实要清空吗?'))return true;}</span>})&quot;/&gt;<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 />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d532&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">oncleared:</span><span class="STYLE1">function(dp){alert('当前日期所选择的月份为:'+dp.cal.date.M);}</span>})&quot;/&gt;</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">&lt;script&gt;</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">&lt;/script&gt;</span><br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d533&quot; onFocus=&quot;<span class="STYLE1">d533_focus(this)</span>&quot;/&gt;</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 />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;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>})&quot;/&gt;<br />
<span class="STYLE1">&lt;script&gt;</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 />
&lt;/script&gt;</span><br />
<br />
这个例子用到了 $dp.cal.date 和 $dp.cal.newdate 属性,你能从这里发现他们的不同之处吗?<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">&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>
... ...
<!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 />
&lt;input type=&quot;text&quot; id=&quot;5421&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">onpicking:</span><span class="STYLE1">function(dp){if(!confirm('日期框原来的值为: '+dp.cal.getDateStr()+', 要用新选择的值:' + dp.cal.getNewDateStr() + '覆盖吗?')) return true;}</span>})&quot; class=&quot;Wdate&quot;/&gt;<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 />
&lt;input id=&quot;<span class="STYLE1">d5221</span>&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onFocus=&quot;var d5222=$dp.$('d5222');WdatePicker({<span class="STYLE2">onpicked:</span><span class="STYLE1">function(){d5222.focus();}</span>,maxDate:'#F{$dp.$D(\'d5222\')}'})&quot;/&gt;<br />
<br />
&lt;input id=&quot;<span class="STYLE1">d5222</span>&quot; class=&quot;Wdate&quot; type=&quot;text&quot; onFocus=&quot;WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})&quot;/&gt;<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 />
&lt;input type=&quot;text&quot; id=&quot;d523_y&quot; size=&quot;5&quot;/&gt;
<br />
&lt;input type=&quot;text&quot; id=&quot;d523_M&quot; size=&quot;3&quot;/&gt;
<br />
&lt;input type=&quot;text&quot; id=&quot;d523_d&quot; size=&quot;3&quot;/&gt;
<br />
&lt;input type=&quot;text&quot; id=&quot;d523_HH&quot; size=&quot;3&quot;/&gt;
<br />
&lt;input type=&quot;text&quot; id=&quot;d523_mm&quot; size=&quot;3&quot;/&gt;
<br />
&lt;input type=&quot;text&quot; id=&quot;d523_ss&quot; size=&quot;3&quot;/&gt;
<br />
&lt;img onclick=&quot;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>})&quot; src=&quot;../../../skin/datePicker.gif&quot; width=&quot;16&quot; height=&quot;22&quot; align=&quot;absmiddle&quot; style=&quot;cursor:pointer&quot;/&gt;<br />
<span class="STYLE1">&lt;script&gt;</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">&lt;/script&gt;</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 />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d531&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">onclearing:</span><span class="STYLE1">function(){if(!confirm('日期框的值为:'+this.value+', 确实要清空吗?'))return true;}</span>})&quot;/&gt;<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 />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d532&quot; onFocus=&quot;WdatePicker({<span class="STYLE2">oncleared:</span><span class="STYLE1">function(dp){alert('当前日期所选择的月份为:'+dp.cal.date.M);}</span>})&quot;/&gt;</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">&lt;script&gt;</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">&lt;/script&gt;</span><br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; id=&quot;d533&quot; onFocus=&quot;<span class="STYLE1">d533_focus(this)</span>&quot;/&gt;</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 />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;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>})&quot;/&gt;<br />
<span class="STYLE1">&lt;script&gt;</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 />
&lt;/script&gt;</span><br />
<br />
这个例子用到了 $dp.cal.date 和 $dp.cal.newdate 属性,你能从这里发现他们的不同之处吗?<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">&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>
... ...
<!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>6. 快速选择功能 <a name="m26" id="m26"></a></h3>
<p style="margin-left:20px">此功能允许指定5个最常用的日期,可以方便用户选择,如果不指定,系统将自动生成<br />
相关属性:<br />
<span class="STYLE2">qsEnabled</span> 是否启用快速选择功能, <span class="STYLE1">注意:如果日期格式里不包含 d(天) 这个元素时,快速选择将一直显示,不收此属性控制</span><br />
<span class="STYLE2">quickSel</span> 快速选择数据,可以传入5个快速选择日期,日期格式同min/maxDate<br />
<br />
<span class="STYLE1">注意:<br />
</span>日期格式必须与 realDateFmt realTimeFmt 相匹配<br />
除了使用静态的日期值以外,还可以使用动态参数(如:%y,%M分别表示当前年和月)<br />
</p>
<div style="margin-left:20px">
<h4>示例6-1 传入2个静态日期</h4>
<p>
<input class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy年MM月dd日',qsEnabled:true,quickSel:['2000-1-10','2000-2-20']})"/>
<br />
&lt;input class=&quot;Wdate&quot; type=&quot;text&quot; onfocus=&quot;WdatePicker({dateFmt:'yyyy年MM月dd日',<span class="STYLE2">qsEnabled:</span><span class="STYLE1">true</span>,<span class="STYLE2">quickSel:</span><span class="STYLE1">['2000-1-10','2000-2-20']</span>})&quot;/&gt;<br />
<br />
<span class="STYLE1">注意:</span>当传入的数据不足5个时,系统将自动补全</p>
</div>
<div style="margin-left:20px">
<h4>示例6-2 传入2个动态日期,1个静态日期</h4>
<p>
<input type="text" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy年MM月dd日',qsEnabled:true,quickSel:['2000-10-01','%y-%M-01','%y-%M-%ld']})"/>
<br />
&lt;input type=&quot;text&quot; class=&quot;Wdate&quot; onFocus=&quot;WdatePicker({dateFmt:'yyyy年MM月dd日',<span class="STYLE2">qsEnabled:</span><span class="STYLE1">true</span>,<span class="STYLE2">quickSel:</span><span class="STYLE1">['2000-10-01','%y-%M-01','%y-%M-%ld']</span>})&quot;/&gt;<br />
<br />
<span class="STYLE1">注意:</span>当传入的数据不足5个时,系统将自动补全</p>
</div>
<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">&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>
... ...
<!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" 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="m3" id="m3"></a></h2>
<h3>1. 属性配置<a name="m31" id="m31"></a></h3>
<ol>
<li>属性表<a name="m311" id="m311"></a>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
<tr>
<th>属性</th>
<th>类型</th>
<th>默认值</th>
<th>说明</th>
</tr>
<tr>
<td colspan="4">静态属性:只能在WdatePicker.js中配置,一般情况下,不建议您修改静态属性的值</td>
</tr>
<tr>
<td align="center">$wdate</td>
<td align="center">bool</td>
<td align="center">true</td>
<td>是否自动引入Wdate类 设置为true时,可直接在引入WdatePicker.js的页面里使用 class=&quot;Wdate&quot; <br />
Wdate可在skin目录下的WdatePicker.css文件中定义<br />
<span class="STYLE2">建议使用默认值</span></td>
</tr>
<tr>
<td align="center">$dpPath</td>
<td align="center">string</td>
<td align="center">''</td>
<td>是否显示指定程序包的绝对位置,一般情况下为空即可(程序自动创建),该属性是为防止极其少数的情况下程序创建出错而设置的<br />
设置方法:<br />
如果,程序包所在http中的地址为 http://localhost/proName/My97DatePicker/<br />
则 $dpPath = '/proName/My97DatePicker/';<br />
<span class="STYLE2">建议使用默认值</span></td>
</tr>
<tr>
<td align="center">$crossFrame</td>
<td align="center">bool</td>
<td align="center">true</td>
<td>是否跨框架,一般设置为true即可,遇到跨域错误时可以将此功能关闭</td>
</tr>
<tr>
<td colspan="4">可配置属性:可以在WdatePicker方法是配置</td>
</tr>
<tr>
<td align="center">el</td>
<td align="center">Element 或 String</td>
<td align="center">null</td>
<td>指定一个控件或控件的ID,必须具有value或innerHTML属性(如input,textarea,span,div,p等标签都可以),用户存储日期显示值(也就是dateFmt格式化后的值)</td>
</tr>
<tr>
<td align="center">vel</td>
<td align="center">Element 或 String</td>
<td align="center">null</td>
<td>指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)</td>
</tr>
<tr>
<td align="center">doubleCalendar</td>
<td align="center">bool</td>
<td align="center">false</td>
<td>是否是双月模式,如果该属性为true,则弹出同时显示2个月的日期框</td>
</tr>
<tr>
<td align="center">enableKeyboard</td>
<td align="center">bool</td>
<td align="center">true</td>
<td>键盘控制开关</td>
</tr>
<tr>
<td align="center">enableInputMask</td>
<td align="center">bool</td>
<td align="center">true</td>
<td>文本框输入启用掩码开关</td>
</tr>
<tr>
<td align="center">autoUpdateOnChanged</td>
<td align="center">bool</td>
<td align="center">null</td>
<td>在修改年月日时分秒等元素时,自动更新到el,默认是关闭的(即:需要点击确定或点击日期才更新)<br />
为false时 不自动更新<br />
为true时 自动更新<br />
为null时(默认值) 如果有日元素且不隐藏确定按钮时 为false,其他情况为true</td>
</tr>
<tr>
<td align="center">weekMethod</td>
<td align="center">string</td>
<td align="center">ISO8601</td>
<td>周算法不同的地方有一些差异<br />
常见算法有两种<br />
1. ISO8601:规定第一个星期四为第一周,默认值<br />
2. MSExcel:1月1日所在的周<br />
<br />
相关链接:<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></td>
</tr>
<tr>
<td align="center">position</td>
<td align="center">object</td>
<td align="center">{}</td>
<td> 日期选择框显示位置<br />
<span class="STYLE2">注意:坐标单位是px,是相对当前框架坐标(不受滚动条影响),默认情况下系统根据页面大小自动选择</span><br />
如:<br />
{left:100,top:50}表示固定坐标[100,50]<br />
{top:50}表示横坐标自动生成,纵坐标指定为 50<br />
{left:100}表示纵坐标自动生成,横坐标指定为 100<br />
请参考示例</td>
</tr>
<tr>
<td align="center">lang</td>
<td align="center">string</td>
<td align="center">'auto'</td>
<td>当值为'auto'时 自动根据客户端浏览器的语言自动选择语言<br />
当值为 其他 时 从langList中选择对应的语言 <br />
你可以参考<a href="#m32">语言配置</a></td>
</tr>
<tr>
<td align="center">skin</td>
<td align="center">string</td>
<td align="center">'default'</td>
<td>皮肤名称 默认自带 default和whyGreen两个皮肤<br />
另外如果你的css够强的话,可以自己做皮肤<br />
你可以参考<a href="#m33">皮肤配置</a></td>
</tr>
<tr>
<td align="center">dateFmt</td>
<td align="center">string</td>
<td align="center">'yyyy-MM-dd'</td>
<td>日期显示格式<br />
你可以参考<a href="2.2.asp.htm#m224" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m224">自定义格式</a></td>
</tr>
<tr>
<td align="center">realDateFmt</td>
<td align="center">string</td>
<td align="center">'yyyy-MM-dd'</td>
<td rowspan="3">计算机可识别的,真正的日期格式<br />
<span class="STYLE2">无效日期设置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必须与它们相匹配<br />
建议使用默认值</span></td>
</tr>
<tr>
<td align="center">realTimeFmt</td>
<td align="center">string</td>
<td align="center">'HH:mm:ss'</td>
</tr>
<tr>
<td align="center">realFullFmt</td>
<td align="center">string</td>
<td align="center">'%Date %Time'</td>
</tr>
<tr>
<td align="center">minDate</td>
<td align="center">string</td>
<td align="center">'1900-01-01 00:00:00'</td>
<td>最小日期(注意要与上面的real日期相匹配)</td>
</tr>
<tr>
<td align="center">maxDate</td>
<td align="center">string</td>
<td align="center">'2099-12-31 23:59:59'</td>
<td>最大日期(注意要与上面的real日期相匹配)</td>
</tr>
<tr>
<td align="center">startDate</td>
<td align="center">string</td>
<td align="center">''</td>
<td> 起始日期,既点击日期框时显示的起始日期<br />
为空时,使用今天作为起始日期(默认值)<br />
否则使用传入的日期作为起始日期(注意要与上面的real日期相匹配)<br />
你可以参考<a href="2.2.asp.htm#m223" tppabs="http://www.my97.net/dp/demo/resource/2.2.asp#m223">起始日期示例</a></td>
</tr>
<tr>
<td align="center">firstDayOfWeek</td>
<td align="center">int</td>
<td align="center">0</td>
<td>周的第一天 0表示星期日 1表示星期一</td>
</tr>
<tr>
<td align="center">isShowWeek</td>
<td align="center">bool</td>
<td align="center">false</td>
<td>是否显示周<br />
你可以参考<a href="2.1.asp.htm#m213" tppabs="http://www.my97.net/dp/demo/resource/2.1.asp#m213">周显示示例</a></td>
</tr>
<tr>
<td align="center">highLineWeekDay</td>
<td align="center">bool</td>
<td align="center">true</td>
<td>是否高亮显示 周六 周日</td>
</tr>
<tr>
<td align="center">isShowClear</td>
<td align="center">bool</td>
<td align="center">true</td>
<td>是否显示清空按钮</td>
</tr>
<tr>
<td align="center">isShowToday</td>
<td align="center">bool</td>
<td align="center">true</td>
<td>是否显示今天按钮</td>
</tr>
<tr>
<td align="center">isShowOthers</td>
<td align="center">bool</td>
<td align="center">true</td>
<td>为true时,第一行空白处显示上月的日期,末行空白处显示下月的日期,否则不显示</td>
</tr>
<tr>
<td align="center">readOnly</td>
<td align="center">bool</td>
<td align="center">false</td>
<td>是否只读</td>
</tr>
<tr>
<td align="center">errDealMode</td>
<td align="center">int</td>
<td align="center">0</td>
<td>纠错模式设置 可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记</td>
</tr>
<tr>
<td align="center">autoPickDate</td>
<td align="center">bool</td>
<td align="center">null</td>
<td><a name="autopickdate" id="autopickdate"></a>为false时 点日期的时候不自动输入,而是要通过确定才能输入<br />
为true时 即点击日期即可返回日期值<br />
为null时(推荐使用) 如果有时间置为false 否则置为true</td>
</tr>
<tr>
<td align="center">qsEnabled</td>
<td align="center">bool</td>
<td align="center">true</td>
<td>是否启用快速选择功能</td>
</tr>
<tr>
<td align="center">autoShowQS</td>
<td align="center">bool</td>
<td align="center">false</td>
<td>是否默认显示快速选择</td>
</tr>
<tr>
<td align="center">quickSel</td>
<td align="center">Array</td>
<td align="center">null</td>
<td>快速选择数据,可以传入5个快速选择日期<br />
注意:日期格式必须与 realDateFmt realTimeFmt realFullFmt 相匹配<br />
你可以参考<a href="2.6.asp.htm#m26" tppabs="http://www.my97.net/dp/demo/resource/2.6.asp#m26">快速选择示例</a></td>
</tr>
<tr>
<td align="center">disabledDays</td>
<td align="center">Array</td>
<td align="center">null</td>
<td>可以使用此功能禁用周日至周六所对应的日期<br />
0至6 分别代表 周日至周六<br />
你可以参考<a href="2.4.asp.htm#m244" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m244">无效天示例</a></td>
</tr>
<tr>
<td align="center">disabledDates</td>
<td align="center">Array</td>
<td align="center">null</td>
<td>可以使用此功能禁用所指定的一个或多个日期<br />
你可以参考<a href="2.4.asp.htm#m245" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m245">无效日期示例</a></td>
</tr>
<tr>
<td align="center">opposite</td>
<td align="center">bool</td>
<td align="center">false</td>
<td>默认为false, 为true时,无效日期变成有效日期 <br />
<span class="STYLE1">注意:该属性对无效天特殊天不起作用</span><br />
你可以参考<a href="2.4.asp.htm#m246" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m246">有效日期示例</a></td>
</tr>
<tr>
<td align="center">specialDates</td>
<td align="center">Array</td>
<td align="center">null</td>
<td>特殊日期,对指定的日期进行高亮显示<br />
你可以参考<a href="2.4.asp.htm#m247" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m247">特殊天与特殊日期示例</a></td>
</tr>
<tr>
<td align="center">specialDays</td>
<td align="center">Array</td>
<td align="center">null</td>
<td>特殊天,使用此功能禁用周日至周六所对应的日期进行高亮显示<br />
0至6 分别代表 周日至周六<br />
你可以参考<a href="2.4.asp.htm#m247" tppabs="http://www.my97.net/dp/demo/resource/2.4.asp#m247">特殊天与特殊日期示例</a></td>
</tr>
<tr>
<td align="center">onpicking</td>
<td align="center">function</td>
<td align="center">null</td>
<td rowspan="4">此四个参数为事件参数<br />
你可以参考<a href="2.5.asp.htm#m25" tppabs="http://www.my97.net/dp/demo/resource/2.5.asp#m25">自定义事件示例</a></td>
</tr>
<tr>
<td align="center">onpicked</td>
<td align="center">function</td>
<td align="center">null</td>
</tr>
<tr>
<td align="center">onclearing</td>
<td align="center">function</td>
<td align="center">null</td>
</tr>
<tr>
<td align="center">oncleared</td>
<td align="center">function</td>
<td align="center">null</td>
</tr>
<tr>
<td align="center">ychanging ychanged <br />
Mchanging Mchanged<br />
dchanging dchanged<br />
Hchanging Hchanged<br />
mchanging mchanged<br />
schanging schanged </td>
<td align="center">function</td>
<td align="center">null</td>
<td><span class="STYLE1">(4.6Beta3新增)</span><br />
<br />
y M d H m s 分别表示年月日时分秒<br />
changing 事件发生在属性改变之前<br />
changed 事件发生在属性改变之后<br />
<br />
你可以参考<a href="2.5.asp-.htm#m254" tppabs="http://www.my97.net/dp/demo/resource/2.5.asp?#m254">示例5-4-1</a></td>
</tr>
</table>
</li>
<li>配置全局默认值<a name="m312" id="m312"></a>
<p>通过配置WdatePicker.js的属性可以避免每次调用都传入配置值,为变成带来很多方便.<br />
在默认情况下My97为每个属性都配置了默认值,这些默认值都可以在WdatePicker.js中修改的<br />
你可以根据你个人的喜好更改这些值<br />
<br />
比如你比较不喜欢默认的皮肤default 而更喜欢 whyGreen 这个皮肤,<br />
你可以直接在WdatePicker.js把skin值改为 whyGreen<br />
这样,你就<span class="STYLE2">不必每次调用控件的时候都传入</span> skin:'whyGreen' 了<br />
你学会了吗?</p>
</li>
<li>配置单个控件<a name="m313" id="m313"></a>
<p>在控件里面你可以使用 onfocus 或 onclick 事件来调用WdatePicker函数来触发日期控件<br />
WdatePicker({})其中{}中的内容都是只对当前实例有效,你可以任意配置属性表里有的所有属性<br />
你可以随意的组合这些属性,达到你的需求<br />
My97日期控件在这方面是做得非常灵活的.</p>
</li>
<li>多套配置快速切换<a name="m314" id="m314"></a>
<p>您可以设置多个WdatePicker.js文件,如
cn_WdatePicker.js,en_WdatePicker.js,simple_WdatePicker.js等<br />
在不同的页面引入不同的 WdatePicker.js 达到配置快速切换的目的.<br />
<span class="STYLE1">注意:文件必须以 _WdatePicker.js(大小写不限制) 为后缀,形如 &lt;yourname&gt;_WdatePicker.js</span></p>
</li>
</ol>
<h3>2. 语言配置<a name="m32" id="m32"></a> </h3>
<ol>
<li>语言列表<a name="m321" id="m321"></a><p>My97DatePicker目录下有个config.js(4.8以后在WdatePicker.js中),里面有段代码: <br />
var <span class="STYLE1">langList</span> = <br />
[<br />
{<span class="STYLE2">name:</span><span class="STYLE1">'en'</span>, <span class="STYLE2">charset:</span><span class="STYLE1">'UTF-8'</span>},<br />
{name:'zh-cn', charset:'gb2312'},<br />
{name:'zh-tw', charset:'GBK'}<br />
];<br />
<br />
这就是语言列表,每个项有name和charset两个属性.<br />
name 表示语言的名称(必须与浏览器的语言字符串命名相同),在配置的时候,<span class="STYLE2">lang属性只能是配置列表里面已有的项,否则将自动返回第一项</span><br />
charset 表示对应语言目录下的js文件所对应的编码格式</p>
</li>
<li>语言安装说明<a name="m322" id="m322"></a>
<p>分两步轻松实现:<br />
1 将语言文件拷贝到 lang 目录<br />
2 打开 config.js 配置语言列表</p>
</li>
</ol>
<h3>3. 皮肤配置<a name="m33" id="m33"></a></h3>
<ol>
<li>皮肤列表<a name="m331" id="m331"></a>
<p>My97DatePicker目录下有个config.js(4.8以后在WdatePicker.js中),里面有段代码:
<br />
var <span class="STYLE1">skinList</span> = <br />
[<br />
{<span class="STYLE2">name:</span><span class="STYLE1">'default'</span>, <span class="STYLE2">charset:</span><span class="STYLE1">'gb2312'</span>},<br />
{name:'whyGreen', charset:'gb2312'},<br />
{name:'blue', charset:'gb2312'},<br />
{name:'simple', charset:'gb2312'} <br />
];<br />
<br />
这就是皮肤列表,每个项有name和charset两个属性.<br />
name 表示皮肤的名称,在配置的时候,<span class="STYLE2">skin属性只能是配置列表里面已有的项,否则将自动返回第一项</span><br />
charset 表示对应皮肤目录下的css文件:datepicker.css所对应的编码格式</p>
</li>
<li>皮肤安装说明<a name="m332" id="m332"></a><p>分两步轻松实现:<br />
1 将皮肤文件包拷贝到 skin 目录<br />
2 打开 config.js 配置皮肤列表
<br />
<br />
<span class="STYLE1">注意:安装过多的皮肤会影响性能,一般只安装自己使用的皮肤,3个以下比较适宜</span></p>
</li>
</ol>
<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">&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>
... ...
<!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>
... ...
<!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
... ...
.WdateDiv{position:relative;width:190px;font-size:12px;color:#333;border:solid 1px #DEDEDE;background-color:#F2F0F1;padding:5px;}.WdateDiv2{width:360px;}.WdateDiv .NavImg a,.WdateDiv .yminput,.WdateDiv .yminputfocus,.WdateDiv #dpQS{background:url(img.gif) no-repeat;}.WdateDiv .NavImg a{float:left;width:16px;height:16px;cursor:pointer;}.WdateDiv .NavImgll a{background-position:0 5px;}.WdateDiv .NavImgl a{background-position:0 -10px;}.WdateDiv .NavImgr a{background-position:0 -25px;float:right;}.WdateDiv .NavImgrr a{background-position:0 -40px;float:right;}.WdateDiv #dpTitle{line-height:0;height:23px;padding:3px 0 0;}.WdateDiv .yminput,.WdateDiv .yminputfocus{margin-left:3px;width:50px;height:20px;line-height:16px;border:solid 1px #F2F0F1;cursor:pointer;background-position:35px -68px;}.WdateDiv .yminputfocus{background-color:#fff;border:solid 1px #D8D8D8;}.WdateDiv .menuSel{z-index:1;position:absolute;background-color:#FFF;border:#A3C6C8 1px solid;display:none;}.WdateDiv .menu{background:#fff;}.WdateDiv .menuOn{color:#fff;background:#0088CC;}.WdateDiv .MMenu,.WdateDiv .YMenu{margin-top:20px;margin-left:-1px;width:68px;border:solid 1px #D9D9D9;padding:2px;}.WdateDiv .MMenu table,.WdateDiv .YMenu table{width:100%;}.WdateDiv .MMenu table td,.WdateDiv .YMenu table td{line-height:20px;text-align:center;font-size:12px;cursor:pointer;padding:0;}.WdateDiv .Wweek{text-align:center;background:#DAF3F5;border-right:#BDEBEE 1px solid;}.WdateDiv td{line-height:20px;font-size:12px;color:#999;background:#fff;cursor:pointer;padding:1px;}.WdateDiv .MTitle td{line-height:24px;color:#7D7D7D;background:#F2F0F1;cursor:default;}.WdateDiv .WdayTable2{border-collapse:collapse;border:gray 1px solid;}.WdateDiv .WdayTable2 table{border:0;}.WdateDiv .WdayTable{line-height:20px;color:#13777e;background-color:#edfbfb;}.WdateDiv .WdayTable td{text-align:center;}.WdateDiv .Wday{color:#323232;}.WdateDiv .Wwday{color:#0088CC;}.WdateDiv .Wtoday{color:#FF6D10;background:#E0EDFE;}.WdateDiv .WspecialDay{background-color:#66F4DF;}.WdateDiv .WotherDay{color:#D4D4D4;}.WdateDiv #dpTime{position:relative;margin-top:5px;}.WdateDiv #dpTime #dpTimeStr{display:inline-block;width:30px;color:#7d7d7d;}.WdateDiv #dpTime input{width:25px;height:20px;line-height:20px;text-align:center;color:#333;border:#D9D9D9 1px solid;margin:0;padding:0;}.WdateDiv #dpTime .tm{width:7px;border:none;background:#F2F0F1;}.WdateDiv #dpQS{float:left;margin-right:3px;margin-top:6px;width:16px;height:16px;cursor:pointer;background-position:0 -90px;}.WdateDiv #dpControl{text-align:right;margin-top:3px;}.WdateDiv .dpButton{margin-left:2px;line-height:16px;width:45px;background-color:#0055CC;color:#fff;border:none;cursor:pointer;}.WdateDiv .dpButton:hover{background-color:#0663A2;}.WdateDiv .hhMenu,.WdateDiv .mmMenu,.WdateDiv .ssMenu{position:absolute;font-size:12px;color:#333;border:solid 1px #DEDEDE;background-color:#F2F0F1;padding:3px;}.WdateDiv #dpTime .menu,.WdateDiv #dpTime .menuOn{width:18px;height:18px;line-height:18px;text-align:center;background:#fff;}.WdateDiv #dpTime .menuOn{background:#0088CC;}.WdateDiv #dpTime td{background:#F2F0F1;}.WdateDiv .hhMenu{top:-87px;left:32px;}.WdateDiv .mmMenu{top:-47px;left:32px;}.WdateDiv .ssMenu{top:-27px;left:32px;}.WdateDiv .invalidMenu,.WdateDiv .WinvalidDay{color:#aaa;}.WdateDiv .WdayOn,.WdateDiv .WwdayOn,.WdateDiv .Wselday,.WdateDiv .WotherDayOn{background-color:#0088CC;color:#fff;}.WdateDiv #dpTime #dpTimeUp,.WdateDiv #dpTime #dpTimeDown{display:none;}
\ No newline at end of file
... ...
/*
* My97 DatePicker 4.7 Skin:whyGreen
*/
.WdateDiv{
width:180px;
background-color:#fff;
border:#C5E1E4 1px solid;
padding:2px;
}
.WdateDiv2{
width:360px;
}
.WdateDiv *{font-size:9pt;}
.WdateDiv .NavImg a{
cursor:pointer;
display:block;
width:16px;
height:16px;
margin-top:1px;
}
.WdateDiv .NavImgll a{
float:left;
background:url(img.gif) no-repeat;
}
.WdateDiv .NavImgl a{
float:left;
background:url(img.gif) no-repeat -16px 0px;
}
.WdateDiv .NavImgr a{
float:right;
background:url(img.gif) no-repeat -32px 0px;
}
.WdateDiv .NavImgrr a{
float:right;
background:url(img.gif) no-repeat -48px 0px;
}
.WdateDiv #dpTitle{
height:24px;
padding:1px;
border:#c5d9e8 1px solid;
background:url(bg.jpg);
margin-bottom:2px;
}
.WdateDiv .yminput{
margin-top:2px;
text-align:center;
border:0px;
height:20px;
width:50px;
color:#034c50;
background-color:transparent;
cursor:pointer;
}
.WdateDiv .yminputfocus{
margin-top:2px;
text-align:center;
border:#939393 1px solid;
font-weight:bold;
color:#034c50;
height:20px;
width:50px;
}
.WdateDiv .menuSel{
z-index:1;
position:absolute;
background-color:#FFFFFF;
border:#A3C6C8 1px solid;
display:none;
}
.WdateDiv .menu{
cursor:pointer;
background-color:#fff;
color:#11777C;
}
.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{
color:#13777e;
background-color:#bdebee;
}
.WdateDiv .WdayTable2{
border-collapse:collapse;
border:#BEE9F0 1px solid;
}
.WdateDiv .WdayTable2 table{
border:0;
}
.WdateDiv .WdayTable{
line-height:20px;
color:#13777e;
background-color:#edfbfb;
border:#BEE9F0 1px solid;
}
.WdateDiv .WdayTable td{
text-align:center;
}
.WdateDiv .Wday{
cursor:pointer;
}
.WdateDiv .WdayOn{
cursor:pointer;
background-color:#74d2d9 ;
}
.WdateDiv .Wwday{
cursor:pointer;
color:#ab1e1e;
}
.WdateDiv .WwdayOn{
cursor:pointer;
background-color:#74d2d9;
}
.WdateDiv .Wtoday{
cursor:pointer;
color:blue;
}
.WdateDiv .Wselday{
background-color:#A7E2E7;
}
.WdateDiv .WspecialDay{
background-color:#66F4DF;
}
.WdateDiv .WotherDay{
cursor:pointer;
color:#0099CC;
}
.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;
color:#497F7F;
}
.WdateDiv #dpTime input{
height:20px;
width:18px;
text-align:center;
color:#333;
border:#61CAD0 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;
margin-top:3px;
}
.WdateDiv .dpButton{
height:20px;
width:45px;
margin-top:2px;
border:#38B1B9 1px solid;
background-color:#CFEBEE;
color:#08575B;
}
\ No newline at end of file
... ...
@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td,img { padding: 0; margin: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var,i { font-weight: normal; font-style: normal; }
ol,ul,li { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
q:before,q:after { content:''; }
abbr,acronym { border: 0; }
/*-- All --*/
html{ min-width:1000px; }
body{ color:#333;font:12px/20px Arial,"Microsoft YaHei","宋体",sans-serif; text-align:center; background:#fff; }
a{ color:#333; text-decoration:none; outline:none;}
a:hover {color:#f00; text-decoration:underline; }
table { border-collapse: collapse; border-spacing: 0; empty-cells:show; }
table td,table th{ border:#ddd solid 1px; padding: 5px 0; }
table th{ background:#39A4DC; color:#fff; }
table .new td{ color:#f60; font-weight:bold; }
/* css三角形 */
.arrow,.arrow s { position:relative; display:block; font-size: 0; line-height: 0; width: 0; height: 0; border-color:transparent; border-style:dashed; border-width:5px; }
.arrowR,.arrowR s{ border-left-color:#aaa; border-left-style:solid; }
.arrowR s{ border-left-color:#fff; position:absolute; left:-7px; top:-5px; }
.arrowR:hover{ border-left-color:#f60; }
.arrowL,.arrowL s{ border-right-color:#aaa; border-right-style:solid; }
.arrowL s{ border-right-color:#fff; position:absolute; right:-7px; top:-5px; }
.arrowL:hover{ border-right-color:#f60; }
.arrowT,.arrowT s{ border-bottom-color:#aaa; border-bottom-style:solid; }
.arrowT s{ border-bottom-color:#fff; position:absolute; left:-5px; top:-3px; }
.arrowT:hover{ border-bottom-color:#f60; }
.arrowB,.arrowB s{ border-top-color:#aaa; border-top-style:solid; }
.arrowB s{ border-top-color:#fff; position:absolute; left:-5px; bottom:-3px; }
.arrowB:hover{ border-top-color:#f60; }
/* css圆形 */
.circle{ line-height:100%; overflow:hidden; font-family:Tahoma,Helvetica; font-size:18px; color:#aaa; }
.circle:hover{ color:#f60; }
/* 顶部导航条 */
#header{ width:100%; left:0; top:0; position:fixed; z-index:10; height:32px; line-height:32px; color:#fff; text-align:left; overflow:hidden; }
#header .headerBg{ width:100%; height:32px; left:0; top:0; position:absolute; z-index:0; background:#000; filter:alpha(opacity=70);opacity:0.7; }
#header a{ color:#fff; }
#header #logo{ position:relative; z-index:1; display:inline-block; *display:inline; zoom:1; font-size:14px; margin-right:5px; padding-left:10px; }
#header .nav{ position:relative; z-index:2; float:right; padding-right:10px; }
#header .nav a{ padding:0 10px; }
#header .nav a.imp{ color:#ff0; }
#header .title{ position:relative; z-index:1; height:32px; overflow:hidden; }
#content{ margin:0 auto; padding:62px 30px 30px 30px; position:relative; text-align:left; z-index:0; }
#footer{ height:34px; line-height:34px; text-align:center; }
/* 首页 - index.html ---------------------------------------------- */
.indBtn{ text-align:center; display:none; }
.indBtn a{ vertical-align:middle; margin:15px 15px 0 0; display:inline-block; *display:inline; zoom:1; padding:14px 22px 3px 22px; line-height:26px;
color:#bede9a; font-size:14px;
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#89c941;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#89c941), to(#72b238));
background: -webkit-linear-gradient(#89c941, #72b238);
background: -moz-linear-gradient(#89c941, #72b238);
background: -ms-linear-gradient(#89c941, #72b238);
background: -o-linear-gradient(#89c941, #72b238);
background: linear-gradient(#89c941, #72b238);
-pie-background: linear-gradient(#89c941, #72b238);
-webkit-box-shadow: #39591c 2px 2px 3px;
-moz-box-shadow: #39591c 2px 2px 3px;
box-shadow: #39591c 2px 2px 3px;
}
.indBtn a em{ font-size:30px; display:block; color:#fff; }
.indIntro a:hover{ text-decoration:none; margin:11px 15px 0 0; }
.indTips{ position:fixed; _position:absolute; width:14px; right:0; top:90px; background:#333; padding:5px; line-height:18px; color:#fff; cursor:pointer;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
}
.indTips a{ color:#fff; text-decoration:none; }
#indTips1{ display:none; }
#ind2{ display:none; }
#ind2 .topic{ font-size:60px; height:120px; line-height:120px; }
/* 参数 - param.html ---------------------------------------------- */
.paramPage .param{ width:100%; margin-bottom:20px; background:#fff; }
.paramPage .param th{ text-align:center; }
.paramPage .param td{ text-align:left; padding:5px 2px; }
.paramPage .param .intro{ text-align:left; }
.paramPage .param .link{ color:#39A4DC; text-decoration:underline; }
.paramPage .param .t b{ color:#f60; }
.paramPage .param i{ color:#f60; }
.paramPage .param .on td{ background:#ffffaa; }
/*.paramPage .param tr.n td{ color:#999; }*/
.paramPage .intro a{ text-decoration:underline; }
.paramPage .notice{ overflow:hidden; text-align:left; padding-bottom:10px; }
.paramPage .notice li{ width:120px; height:30px; line-height:30px; text-align:center; float:left; margin-right:10px; color:#fff; background:#666; cursor:pointer; }
.paramPage .notice .on{ background:#f60; }
/* 联系作者 ---------------------------------------------- */
#content .contact{ display:none; color:#f60; margin-bottom:20px; }
/* 案例 - demo.html ---------------------------------------------- */
.demoBox{ padding:0 20px 60px 20px; background:#f2f2f2; border-bottom:3px dotted #ccc; }
.demoBox .hd{ padding:40px 10px 0 10px; }
.demoBox .hd h3{ font-size:30px; font-weight:bold; color:#39A4DC; line-height:60px; }
.demoBox .hd h3 span{ color:#ccc; font-style:italic; font-size:60px; }
.demoBox .bd{ padding:20px; overflow:hidden; zoom:1; }
.demoBox .bd .iframeWrap{ overflow:hidden; float:left; }
.demoBox iframe{ width:100%; height:100%; vertical-align:middle; }
.demoBox .botTit{ height:22px; line-height:22px; overflow:hidden; background:#eee; text-align:right; padding:5px 0; overflow:hidden; display:none;
}
.demoBox .botTit em{ float:left; font-weight:bold; padding-left:10px; }
.demoBox .botTit span a{ display:block; float:right; height:20px; line-height:20px; padding:0 5px; background:#f60; margin-right:10px; color:#fff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; display:none; }
.demoBox .botTit span a:hover{ text-decoration:none; background:#f60; }
.params{ width:580px; height:100%; margin-left:20px; float:left; _display:inline; background:#fff; padding-bottom:10px; border:1px solid #ddd; }
.params table{ background:#fff; }
.params table .tit td{ padding: 5px 10px; background:#39A4DC; color:#fff; }
.params table td{ border:1px solid #fff; }
.params table .n{ width: 153px; text-align:right; }
.params table .new{ color:#f00; }
.params table i{ color:#999; }
.params p{ padding:10px 0 0 10px; }
.params .curJsCode{ color:#f60; display:block; font-family:SimSun; }
.rightNav{ position:fixed; width:140px; right:0; top:100px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank); }
.rightNav a{ display:block; position:relative; height:30px; line-height:30px; margin-bottom:2px; background:#fff; padding-right:10px; width:130px; overflow:hidden; cursor:pointer; right:-110px; }
.rightNav a:hover{ text-decoration:none; color:#39A4DC; }
.rightNav a:hover em{ background:#00b700}
.rightNav a em{ display:block; float:left; width:30px; background:#39A4DC; color:#fff; font-size:16px; text-align:center; margin-right:10px;}
.rightNav a.new em{ background:#f60; }
.demoBox .iframeWrap{ width:452px; }
.demoBox .iframeWrap iframe{ width:452px; height:232px; background:url(images/loading.gif) center center no-repeat; }
#picScroll-left iframe{ height:174px; }
#picScroll-top iframe{ height:415px; }
#picMarquee-left iframe{ height:172px; }
#picMarquee-top iframe{ height:415px; }
#txtScroll-left iframe{ height:80px; }
#txtScroll-top iframe{ height:182px; }
#txtMarquee-left iframe{ height:107px; }
#txtMarquee-top iframe{ height:184px; }
#sideMenu iframe{ height:227px; }
/* 隐藏代码盒子 */
#displayBox{ z-index:10; display:none; position:fixed; _position:absolute; width:1000px; height:500px; left:50%; top:60px; margin-left:-500px; background:#fff;
border:5px solid #eee;
-webkit-box-shadow: #333 0 0 8px;
-moz-box-shadow: #333 0 0 8px;
box-shadow: #333 0 0 8px; }
#displayBox .hd{ height:30px; line-height:30px; background:#eee; padding:0 10px; position:relative;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F7F7F7), to(#eee));
background: -webkit-linear-gradient(#F7F7F7, #eee);
background: -moz-linear-gradient(#F7F7F7, #eee);
background: -ms-linear-gradient(#F7F7F7, #eee);
background: -o-linear-gradient(#F7F7F7, #eee);
background: linear-gradient(#F7F7F7, #eee);
}
#displayBox .hd h3{ font-weight:bold; color:#39A4DC; }
#displayBox .hd a{ display:block; position:absolute; right:10px; top:7px; width:20px; height:16px; line-height:16px; text-align:center; background:#f60; color:#fff; cursor:pointer; }
#displayBox .hd a:hover{ text-decoration:none; }
#displayBox .bd{ padding:10px 0; background:#fff; }
#displayBox textarea{ width:458px; height:230px; padding:10px; border:1px solid #ccc; display:block; }
#displayBox .bd p{ padding-top:10px; }
#displayBox iframe{ width:1000px; height:440px; margin:0 auto; }
/* 扩展效果 ---------------------------------------------- */
.authorWord{ margin-bottom:25px; text-align:left; background:#fff; }
.authorWord h3{ padding:0 20px; height:30px; font:normal 14px/30px "Microsoft YaHei"; overflow:hidden; cursor:pointer; border-bottom:1px dotted #ccc; }
.authorWord h3 .arrow{ float:right; border-top-color:#fff; margin-top:11px; }
.authorWord .con{ padding:10px 20px; line-height:22px; }
.authorWord .con p{ margin-bottom:5px }
.authorWord a{ color:#f60; text-decoration:underline; }
.demoList{ overflow:hidden; padding-top:10px; }
.demoList li{
position:relative; cursor:pointer; float:left; width:160px; text-align:center; margin:0 30px 30px 0;
padding:4px 4px 0 4px; background:#e3e3e3; color:#000;
}
.demoList li img{ display:block; width:160px; height:120px; background:url(images/loading.gif) center center no-repeat; }
.demoList li h3{ height:28px; line-height:28px; }
.demoList li.new i{ display:block; position:absolute; top:4px; right:4px; z-index:1; width:31px; height:31px; background:url(images/new.png) 0 0 no-repeat; }
.demoList li.on{
background:#666; color:#fff;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
-moz-transition-duration:0.3s;
}
.demoBoxEven{ background:#fff; }
.demoBoxEven .demoList li{ }
.demoBoxEven .demoList li.on{ background:#666; color:#fff; }
/* 如何使用 ---------------------------------------------- */
.usePageDl{ width:1000px; }
.usePageDl dt h2{ font:normal 22px/150% "Microsoft YaHei"; _font-weight:bold; color:#39A4DC; }
.usePageDl dt h2 a{ color:#f60; text-decoration:underline; }
.usePageDl dt p{ padding:5px 0 10px 33px; }
.usePageDl dt p b{ color:#f60; }
.usePageDl dd{ margin-bottom:50px; }
.usePage .demoBox{ padding:0; }
.usePage .demoBox .bd .iframeWrap{ background:none; }
/* 下载页面 ----------------------------------------------- */
.downLoadDl{ width:1000px; }
.downLoadDl dt h2{ font:normal 22px/150% "Microsoft YaHei"; _font-weight:bold; color:#39A4DC; }
.downLoadDl dt h2 a{ font-size:12px; color:#333; margin-left:20px; text-decoration:underline; }
.downLoadDl dd{ margin-bottom:50px; padding:10px 0; }
.dBtn{ cursor:pointer; display:block; height:30px; line-height:30px; width:100px; text-align:center; font-size:16px; background:#6ddb00; color:#fff; _font-weight:bold;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
-webkit-box-shadow: #666 1px 1px 2px;
-moz-box-shadow: #666 1px 1px 2px;
box-shadow: #666 1px 1px 2px;
}
.dBtn:hover{ text-decoration:none; background:#65ca00; color:#fff; margin-left:2px; }
.pBtn{ background:#FFA241; font-size:12px; }
.pBtn:hover{ background:#ff8635; }
.pBtn i{ font-family:Arial; _font-weight:bold; font-size:20px; }
.downPage .inculde{ margin-top:20px; padding:10px; border:1px dotted #eee; background:#f3f3f3;}
.downPage .inculde li{ color:#666; }
.downPage .inculde em{ font-weight:bold; color:#333; }
.downPage .inculde h3{ font-size:14px; font-weight:bold; color:#c00; padding-bottom:10px }
.downPage .inculde a{ color:#39A4DC; text-decoration:underline; margin:0 2px; }
#whyPay p,#howPay p{ text-indent:20px; margin-bottom:10px }
.pay{ overflow:hidden; padding-bottom:5px; vertical-align:top; }
.pay .pBtn{ float:left; }
.pay p{ margin-left:120px; }
.pay p span{ color:#c00; }
.downPage .imp{ color:#c00; font-size:14px; }
/* 颜色代码
#39A4DC 浅蓝色
*/
... ...