Skip to content
GitLab
"vscode:/vscode.git/clone" did not exist on "435af8ad55ff81232294e608507bd3c566b06d43"
Commit 8b5f31b8 authored by Huang's avatar Huang
Browse files

no commit message

parent d8b3ed74
Expand all Hide whitespace changes
Inline Side-by-side
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/WdatePicker.js 0 → 100644
View file @ 8b5f31b8
/*
* 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
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/develop/lang/zh-cn.js 0 → 100644
View file @ 8b5f31b8
var $lang={
errAlertMsg: "不合法的日期格式或者日期超出限定范围,需要撤销吗?",
aWeekStr: ["周","日","一","二","三","四","五","六"],
aLongWeekStr:["周","星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
aMonStr: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一","十二"],
aLongMonStr: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
clearStr: "清空",
todayStr: "今天",
okStr: "确定",
updateStr: "确定",
timeStr: "时间",
quickStr: "快速选择",
err_1: '最小日期不能大于最大日期!'
}
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/develop/lang/zh-tw.js 0 → 100644
View file @ 8b5f31b8
var $lang={
errAlertMsg: "不合法的日期格式或者日期超出限定範圍,需要撤銷嗎?",
aWeekStr: ["周","日","一","二","三","四","五","六"],
aLongWeekStr:["周","星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
aMonStr: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一","十二"],
aLongMonStr: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
clearStr: "清空",
todayStr: "今天",
okStr: "確定",
updateStr: "確定",
timeStr: "時間",
quickStr: "快速選擇",
err_1: '最小日期不能大於最大日期!'
}
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/develop/skin/default/datepicker.css 0 → 100644
View file @ 8b5f31b8
/*
* 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
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/develop/skin/twoer/datepicker.css 0 → 100644
View file @ 8b5f31b8
/*
* 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
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/develop/skin/whyGreen/datepicker.css 0 → 100644
View file @ 8b5f31b8
/*
* 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
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/docs/css/base.css 0 → 100644
View file @ 8b5f31b8
* {
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
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/docs/demo.htm 0 → 100644
View file @ 8b5f31b8
<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>
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/docs/demo/index.htm 0 → 100644
View file @ 8b5f31b8
<!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>
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/docs/demo/resource/2.1.asp.htm 0 → 100644
View file @ 8b5f31b8
<!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>
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/docs/demo/resource/2.3.asp.htm 0 → 100644
View file @ 8b5f31b8
<!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>
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/docs/demo/resource/2.5.asp-.htm 0 → 100644
View file @ 8b5f31b8
<!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>
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/docs/demo/resource/2.5.asp.htm 0 → 100644
View file @ 8b5f31b8
<!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>
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/docs/demo/resource/2.6.asp.htm 0 → 100644
View file @ 8b5f31b8
<!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>
JeeSpringCloud/jeespring-web/src/main/webapp/static/My97DatePicker/docs/demo/resource/999.asp-.htm 0 → 100644
View file @ 8b5f31b8
<!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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment