From f4f8ba867ff4b2fa52dc42667923b76c9e302c3a Mon Sep 17 00:00:00 2001 From: Marc Grabanski Date: Sun, 1 Jun 2008 17:48:33 +0000 Subject: [PATCH] Initial commit of datepicker functional demo. --- .../datepicker/demo/img/active-bg.gif | Bin 0 -> 89 bytes .../functional/datepicker/demo/img/ar.gif | Bin 0 -> 863 bytes .../functional/datepicker/demo/img/au.gif | Bin 0 -> 941 bytes .../functional/datepicker/demo/img/br.gif | Bin 0 -> 925 bytes .../datepicker/demo/img/calendar.gif | Bin 0 -> 269 bytes .../datepicker/demo/img/calendar2.gif | Bin 0 -> 1035 bytes .../functional/datepicker/demo/img/cn.gif | Bin 0 -> 856 bytes .../datepicker/demo/img/dark-bg.gif | Bin 0 -> 85 bytes .../datepicker/demo/img/hover-bg.gif | Bin 0 -> 89 bytes .../functional/datepicker/demo/img/id.gif | Bin 0 -> 840 bytes .../functional/datepicker/demo/img/ie.gif | Bin 0 -> 875 bytes .../functional/datepicker/demo/img/ke.gif | Bin 0 -> 948 bytes .../functional/datepicker/demo/img/lb.gif | Bin 0 -> 903 bytes .../functional/datepicker/demo/img/next.gif | Bin 0 -> 98 bytes .../datepicker/demo/img/normal-bg.gif | Bin 0 -> 110 bytes .../functional/datepicker/demo/img/nz.gif | Bin 0 -> 925 bytes .../functional/datepicker/demo/img/prev.gif | Bin 0 -> 97 bytes .../functional/datepicker/demo/img/se.gif | Bin 0 -> 892 bytes .../functional/datepicker/demo/img/tab.png | Bin 0 -> 1717 bytes .../functional/datepicker/demo/img/us.gif | Bin 0 -> 896 bytes .../functional/datepicker/demo/img/za.gif | Bin 0 -> 900 bytes .../datepicker/demo/jquery.localisation.js | 64 ++ .../datepicker/demo/ui.datepicker.alt.css | 158 ++++ .../datepicker/demo/ui.datepicker.demo.css | 51 + .../datepicker/demo/ui.datepicker.demo.js | 81 ++ ui/demos/functional/datepicker/index.html | 887 ++++++++++++++++++ 26 files changed, 1241 insertions(+) create mode 100644 ui/demos/functional/datepicker/demo/img/active-bg.gif create mode 100644 ui/demos/functional/datepicker/demo/img/ar.gif create mode 100644 ui/demos/functional/datepicker/demo/img/au.gif create mode 100644 ui/demos/functional/datepicker/demo/img/br.gif create mode 100644 ui/demos/functional/datepicker/demo/img/calendar.gif create mode 100644 ui/demos/functional/datepicker/demo/img/calendar2.gif create mode 100644 ui/demos/functional/datepicker/demo/img/cn.gif create mode 100644 ui/demos/functional/datepicker/demo/img/dark-bg.gif create mode 100644 ui/demos/functional/datepicker/demo/img/hover-bg.gif create mode 100644 ui/demos/functional/datepicker/demo/img/id.gif create mode 100644 ui/demos/functional/datepicker/demo/img/ie.gif create mode 100644 ui/demos/functional/datepicker/demo/img/ke.gif create mode 100644 ui/demos/functional/datepicker/demo/img/lb.gif create mode 100644 ui/demos/functional/datepicker/demo/img/next.gif create mode 100644 ui/demos/functional/datepicker/demo/img/normal-bg.gif create mode 100644 ui/demos/functional/datepicker/demo/img/nz.gif create mode 100644 ui/demos/functional/datepicker/demo/img/prev.gif create mode 100644 ui/demos/functional/datepicker/demo/img/se.gif create mode 100644 ui/demos/functional/datepicker/demo/img/tab.png create mode 100644 ui/demos/functional/datepicker/demo/img/us.gif create mode 100644 ui/demos/functional/datepicker/demo/img/za.gif create mode 100644 ui/demos/functional/datepicker/demo/jquery.localisation.js create mode 100644 ui/demos/functional/datepicker/demo/ui.datepicker.alt.css create mode 100644 ui/demos/functional/datepicker/demo/ui.datepicker.demo.css create mode 100644 ui/demos/functional/datepicker/demo/ui.datepicker.demo.js create mode 100644 ui/demos/functional/datepicker/index.html diff --git a/ui/demos/functional/datepicker/demo/img/active-bg.gif b/ui/demos/functional/datepicker/demo/img/active-bg.gif new file mode 100644 index 0000000000000000000000000000000000000000..d608c54698e081a3deae0f1b9b827484deaeacce GIT binary patch literal 89 zcmZ?wbhEHb_zyzHK#BinX8u2O=Kp_& z|Nns`2r!I-(GVC$A)o{D3n(uzaJVoqa>#gWSa7hJLs%>3#D>Jftb7VyJsyRNj&|`G wW!;%kc(9R~*P=^i=f(q!%$y#pp1crz;?*Obd}zsw4a?5XwkQ_k;b5=^0Q@aLO8@`> literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/au.gif b/ui/demos/functional/datepicker/demo/img/au.gif new file mode 100644 index 0000000000000000000000000000000000000000..db005b4c782df88f8eb4470f79e99a00304b4028 GIT binary patch literal 941 zcmZ?wbhEHblw#mz_|Cv^=FAxehBRj83{K8$LBRqEiBe_dYCXM13yXFqr(SRG$zfqL z6B6cUWi2f&T~l4XzM)}rPtUH|vk$LWacb+)Esa z|Nk?Lg3%Bd3L&5aawI4(FmOy_FwRL3P;g-35#W*&h}f{uxt&FTqvZpGGYcz|tc{Mx zhr~7xNu!Jl4UW!i43csg6%h@G-FOU=Pxb8FxQvNa+$>{5!$GF@iQHCsIvW-$vP|J* z3aLpbaAsqbiM8^HC~&;g#9^Rduxr7?#=Fr2Cupr_8e}*4FG`4N4dh{sV#%6n3+HwYl zGs<#jb#<>sMcu1yxI1xG&&ty)|Nmbvz|q9O$RXpgVZp&>4q+{uh=c=9t;}2=Iv*}19AOer5SZ{{gHl5`w^N&o!pDb4 znUsS4-kc~{#KIw{V3Q$WbkL=X)!!>cVbVcn4x4;4l@*&A{O2j9a-~{+P-|p$ch%Z4 s^TQLSSvHwc4>C3}G)>{=oARY%VuRZ{IrdjR*@YUnw-*Sru`pNz03&={+W-In literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/calendar.gif b/ui/demos/functional/datepicker/demo/img/calendar.gif new file mode 100644 index 0000000000000000000000000000000000000000..d0abaa7c0b892e781b6f553453a0027efea014b9 GIT binary patch literal 269 zcmZ?wbhEHb6kyoJ#dt% zaYstuiRe5}O|8;NEA%ba6j)5k7TbN(gNwC&D)Y{1Cu2PhDy(ymnp7_1Ai(k{X>FbJ zg$yQ1aX#U+v{)u7c4kS5=DdO;0Y*k<=8BdGnYaWYcOkak83LIJ0`39}`h<8zSFc^O QT3n!+Z|k=0I}{nL0T`orxBvhE literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/calendar2.gif b/ui/demos/functional/datepicker/demo/img/calendar2.gif new file mode 100644 index 0000000000000000000000000000000000000000..519a1fd4a08e031068a4da98ba2af13b29bd4c07 GIT binary patch literal 1035 zcmb_b%S)AU5S=z6gwO+A7zja_J&@{0P-*Y*Sz+Z3yGAC_kQ;H4&_d{DNJUU$rc4SI zrs++|42@ifMH$IZmWGgv+C)eM22m}H>CE>xG;sOu+?hFZ&YABP6yK zqE8}vB#U1BzZ+Tfz!TpP`0f8iAYvjRQs0Cu1PV++C@2N9j5)9b*1+a0P!tX# zK{SXtDfB7_m7p5bz!9UtIG6;}VAu-Q00U{T1TECC7}$UY7KY6Qd5#cfWj5D`wa7$R zl*L>wSfHrFs;ma}AcbBwVN*89gCC%YY1je%AOVG74KR=fOSFOq76Tj5z%qBv%g7Nb zVs0e#VJ$LMQG>6L3l=DfsTh2O(=Y(M&<>-a7FNO!(8M(C04E5BLa+uHNMjPTzyphc z4QTTdc{j?)5r&JwNa({_WE#C>?rU^!FGeSHo1?3EZ)CK)9(m`ZksW@7NTDM|r2Qrl z4+oB*@jBp2Fb|rrYQ4YB{$HTfc^W#fw6ONh?hDi1``a5%PCQuCo4K#!&*xn)ucrUa zo9x-x`YM*(laWz0cyDD+_R|;1@xjw2*EgK%kJt5NwZ(FdjV}~F?ta@I_9iz~FDor> zNzKe|?E1NAs;l_Pvya358GSp8?(S$BscTR6e<+KkeOtY5CRzFJTC8iTDZRY5s<&Z9 zb57p5x%XFYwmf-NBmr+0xlh9osAVbIZ>DnC>0w**0IW P_~zHi&XP-+ODOjr<(tzT literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/cn.gif b/ui/demos/functional/datepicker/demo/img/cn.gif new file mode 100644 index 0000000000000000000000000000000000000000..5482753d6b7269e8069aa7551f39b5f1fa12d492 GIT binary patch literal 856 zcmeH`>uU`F0L6bB)@^Rq81ujTAm4EURxIO zm?5vYd2G90%QJb)Yu+S2{@ncm{sX7;<@Eb@PN!u2xDnxKZ$kV56HdnNn1TUJ#UQ3( z2-7hG`(R(p!hV>IIXDmp;b0tsxi}Q_a2O890t{mWN8;#2EHE6lu+T`vA}q!+I2KE= z6w9z2C*VY!gp+X!PQ__hft5HNXJ8a(;%uzKIXD;R;e1?x3vm%H#wEBEm*H}(#uc~{ zSK(@0i?z58>u^18z>T;Wx8PRXjyrHC?#6oDgZpql9>4}{#Dmy`hwv~S!J~K#Phc~i z#1=e-r|}G)#dCNbFW^PIgqJafSMVxc!|T|JZ5YR!cnfdi9qhoncn|O61AK^&@G(BY zr}zw?;|qL=ukba#!MFGh-{S}D#Eb-9T;^>iPnKQ6vSj zN{{c2)g%{3i`qKMVrzmue<$^bXA|s|litv@DVkQ-E&o?%ZD>GyO?7#FWqWhujcs|e L;=3~Q`xE&K;x`et literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/dark-bg.gif b/ui/demos/functional/datepicker/demo/img/dark-bg.gif new file mode 100644 index 0000000000000000000000000000000000000000..1dea48a8f6664c9a5d5a94e977c1d7212a6bef8f GIT binary patch literal 85 zcmZ?wbhEHb3xI7cXAAbm`*d3l}e6x_tTajT<-q|NpP}lZBCift^8z p0SG{98JMLwcHQ}C;N`q}uj=cwv(saC#4b@4SZ=W5%`PM literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/hover-bg.gif b/ui/demos/functional/datepicker/demo/img/hover-bg.gif new file mode 100644 index 0000000000000000000000000000000000000000..fbf94fc2c1891ff891f2d3c3208cf431c35a4628 GIT binary patch literal 89 zcmZ?wbhEHbXn6pV(z za0vk&kVimyfq_GpL6}3vW5a@j%^bp7F()=GJlrmz?3MFl!J?zx62@6~PHbF!ykEh& NOU84P%83RBYXIsnE%E>W literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/ie.gif b/ui/demos/functional/datepicker/demo/img/ie.gif new file mode 100644 index 0000000000000000000000000000000000000000..827c498d2618bd4413ee7a827e914c8faee8de6a GIT binary patch literal 875 zcmZ?wbhEHb6l36K_|5_WumS|NlTV z^Z)-d|IYx`GyI>)V9dafX3Q`%4XAdev9WPlTH4H+Kn4HLoH+v|N5Nfx&t~}n&#en{(Sy?-dEMfMB=mY zh`|P)j{<~;hf{$U0VvH&q414LA+AUgUm9Y^D2@TI00qElpcv2sWk7C1LKUC~YJj%@ zU37FEP!AY(h4l2wj0~sU*c}v7}HUEtbklml5$9DAy_IL{vxAzR&k1UrA=RGZ|MI>}EFaGB2$$O<)ob z7J_f#>&D7-Uldp0s@DIgH{Lax&E}@2rsn46j*gDDwzjUWuI}#cA+z~*OG|HWZ-0Nk z#bOy68X6oN92pszoSYmVAOGECdeYeVw54U`+O?JT_CI=h*82L^ESB|wfxw+Re-01Z zY&NUaIz2t@a5$V!r_1GXyWL)|H)yj3r>6e4+n+2ftSl~WxZOdI=O3@v=kxjfe&1id z)z#H!e*d%O<<0f=U@#a61VW+E#>U20An6Je3b zx!?BwWQt^P)=sweSwG6CLTh-+0V_T2h;FU5-;^m{d7S&`Yk~gm#fQ#;f=(y1_hQ3q zeK)?Nf0=w#^tSH>yq=KKBd()3({4XKA^zr2V%fP6=fr76XCBiNb~5Xz=H}>)Y3ElH zJ*88DQF4rMS6mofU#T49#c9tkS(|nFuKg45`e&T9@motjG=$Uk7fhUAYCz8a#I0+L literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/lb.gif b/ui/demos/functional/datepicker/demo/img/lb.gif new file mode 100644 index 0000000000000000000000000000000000000000..f204918fe54fdb589b77b4312e2464146c04961f GIT binary patch literal 903 zcma)*ziSjx5XT24vUVq8IKf7*NkR%?niVYsLDz_o!r}}fMr1t1Kj6v(5%*BZku*El z92juRQ=2U>8fA+qJVCfpvANRDa{Rt`LSpB#EN^DtkMHOE-Mx1GYINq5?Cqs6eofk{P+WM2!V= zT+%kFlVE>H5fVem20>_IH$@3eB!L9eWcF(|olWcSbv3QZFJ(~|`8e;4I^C+{ zg?&*OV#h~uIP(Ay(}vv$HY6F57?}VyBH_p=E~*a+2PA}Mff?!}B=q2TxEYcONF2q1 zJY@J!umNeFTi}Q8h!pL|S2IuVFH(#hf&yyrK8XL{Yc)&^{{khC>1=W)8x8lKBqvwy z)T7P4BaPPD>Uuujf8K1}y}$G9=I5=((WlGrcV8?FPCu-E)RS{-{l)Cv@@<*i=*xE1 x|2lcO{p!T=>4Tqdd&SP>D~sdSvE7ev)?csepC3HBl-yd___T5A!?zw?`~zJmo!$Td literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/next.gif b/ui/demos/functional/datepicker/demo/img/next.gif new file mode 100644 index 0000000000000000000000000000000000000000..be0959b1bd97bc5892a6a50d10b108aea4e890f3 GIT binary patch literal 98 zcmZ?wbhEHb6krfw_{abPHl;`I-@mUByi@Tf3nNHC2SkA68JLV)@*7Vt-E$->CMz|NrfPt>_6 zHL)Z$MWH;iBts!2BUQoO(>H)Y2dIbvWC#PZ6vwVR9}T>mSMODQeRg(w%#PS4t~~0B LE8grJN4S``10y-dHfbs$ZM-u}-PXGfWQxgXVmtBOx zf(3`$1;qIrCLCa7Vq@ZTx)bq%p^2HBL!uzT;Xxw{yOLf7!^Ota(+y-@IyOvHbz$RS zVNg&w(C9aj%j8%DEw W&CN+`7d_n(@b=cM{OfEi4AuYxcumFt literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/prev.gif b/ui/demos/functional/datepicker/demo/img/prev.gif new file mode 100644 index 0000000000000000000000000000000000000000..95d840f471b222626df33f4066065aaa87cbf16a GIT binary patch literal 97 zcmZ?wbhEHb6krfw_{abPHl;`I-@mUByi@Tf3nNHC2SkA68JLV(_#1aGJaeb{c&F#v usef)Nv@BXtBWvz)TXSjO>3yjTn^!9G|JvuDf7kJZ1~2=@iktv025SJ{;v%B} literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/se.gif b/ui/demos/functional/datepicker/demo/img/se.gif new file mode 100644 index 0000000000000000000000000000000000000000..7301c598e42429f5424c57410e409e3cae2e9f1c GIT binary patch literal 892 zcmZ?wbhEHblw=TK_|5aEmPRo%gB(v!*A7?f@HBqbJd-m|YeuGly5C&8a=U^V7Z)Fz X;-+Zk(=|c)@-ngcd=9G&6&S1myfQkZ literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/tab.png b/ui/demos/functional/datepicker/demo/img/tab.png new file mode 100644 index 0000000000000000000000000000000000000000..01c8ab41714fb2d755d5c3da3fda9bf77fffd6d4 GIT binary patch literal 1717 zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!PjD~;$y7$2bRfl&?&#~tz_78O`%fY(0|PTd zfKQ0)|NsAg{{8>$=f4l%|GxY7^X2EiFFyZ#{o&iQ_un48`+o1;?xA2`|;@u*N&XKzVGyvJx9-NJ$7N;k&EkgA6&cp*rE-4m#o`9W$F5lFzsfc@f z_oSalqD0$8r`wutY@&|@*c@fv{byU7_5E3Olirf^`|C7bJkDM!Zn9Np_v-oQd=hTf z?!2RW&ga49vulFaGJRKfKNpa&GrDc*n~a@}rt=ur7+$@&ZH@Z50ETM|JPF5*StZ>_7=4Fm$oKmHu9nxgT(|w}mi_O1 z)t}E_ZR(CZeN#DMx}Cz_+=RB$!ml0Qjp{Rv*BIw}K0n>Gb^iS~4`*&jIQu?qzxQdb zq|MLM_LVl@_eqQdh2I;`#rf+GtIFqF9Vt40OU=6&^Sh>SQICfSO z8|WCmXY`h0Ve3!+TURTjSMlQI^YzEu{RHCvKc6iiU$txZ_l@^|vaP#+_I9)W-@33F n3}i<(hQ0Vw28LqB?8rLCc9-=j)ekRqg0i}&tDnm{r-UW|9wgw0 literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/img/us.gif b/ui/demos/functional/datepicker/demo/img/us.gif new file mode 100644 index 0000000000000000000000000000000000000000..39c472e26fc48ae016a336e8ea301dda3d2738cc GIT binary patch literal 896 zcmZ?wbhEHblw#m#_|Cv^=FAxehBN_z0tJOi1A}G(?tTMLRJbkGS0ThmttVptbTSr kcQuzN*OnK|lX;}3gh)-&3|h|H!zAmqbT zI5Zq=<`9;X(GYNOY!%>TOYr!Rc%+3 Gum%9YP%w4? literal 0 HcmV?d00001 diff --git a/ui/demos/functional/datepicker/demo/jquery.localisation.js b/ui/demos/functional/datepicker/demo/jquery.localisation.js new file mode 100644 index 000000000..b11e37835 --- /dev/null +++ b/ui/demos/functional/datepicker/demo/jquery.localisation.js @@ -0,0 +1,64 @@ +/* http://keith-wood.name/localisation.html + Localisation assistance for jQuery v1.0.2. + Written by Keith Wood (kbwood@iprimus.com.au) June 2007. + Under the Creative Commons Licence http://creativecommons.org/licenses/by/3.0/ + Share or Remix it but please Attribute the author. */ + +(function($) { // Hide scope, no $ conflict + +/* Load applicable localisation package(s) for one or more jQuery packages. + Assumes that the localisations are named -.js + and loads them in order from least to most specific. + For example, $.localise('jquery-calendar'); + with the browser set to 'en-US' would attempt to load + jquery-calendar-en.js and jquery-calendar-en-US.js. + Also accepts an array of package names to process. + Optionally specify whether or not to include the base file, + the desired language, and/or the timeout period, e.g. + $.localise(['jquery-calendar', 'jquery-timeentry'], + {loadBase: true; language: 'en-AU', timeout: 300}); */ +$.localise = function(pkg, settings) { + var saveSettings = {async: $.ajaxSettings.async, timeout: $.ajaxSettings.timeout}; + $.ajaxSetup({async: false, timeout: (settings && settings.timeout ? settings.timeout : 500)}); + var localiseOne = function(pkg, lang) { + if (settings && settings.loadBase) { + $.getScript(pkg + '.js'); + } + if (lang.length >= 2) { + $.getScript(pkg + '-' + lang.substring(0, 2) + '.js'); + } + if (lang.length >= 5) { + $.getScript(pkg + '-' + lang.substring(0, 5) + '.js'); + } + }; + var lang = normaliseLang(settings && settings.language ? settings.language : $.defaultLanguage); + if (isArray(pkg)) { + for (i = 0; i < pkg.length; i++) { + localiseOne(pkg[i], lang); + } + } + else { + localiseOne(pkg, lang); + } + $.ajaxSetup(saveSettings); +}; + +/* Retrieve the default language set for the browser. */ +$.defaultLanguage = normaliseLang(navigator.language ? navigator.language /* Mozilla */ : + navigator.userLanguage /* IE */); + +/* Ensure language code is in the format aa-AA. */ +function normaliseLang(lang) { + lang = lang.replace(/_/, '-').toLowerCase(); + if (lang.length > 3) { + lang = lang.substring(0, 3) + lang.substring(3).toUpperCase(); + } + return lang; +} + +/* Determine whether an object is an array. */ +function isArray(a) { + return (a.constructor && a.constructor.toString().match(/\Array\(\)/)); +} + +})(jQuery); diff --git a/ui/demos/functional/datepicker/demo/ui.datepicker.alt.css b/ui/demos/functional/datepicker/demo/ui.datepicker.alt.css new file mode 100644 index 000000000..2e8e4a6a0 --- /dev/null +++ b/ui/demos/functional/datepicker/demo/ui.datepicker.alt.css @@ -0,0 +1,158 @@ +/* Alternate UI date picker styles */ +#datepicker_div, .datepicker_inline { + font-family: Arial, Helvetica, sans-serif; + font-size: 14px; + padding: 0; + margin: 0; + background: #d8d8d8 url(../img/dark-bg.gif) repeat; + color: #008; + width: 220px; +} +#datepicker_div { + display: none; + border: 1px solid #008; + z-index: 10; /*must have*/ +} +.datepicker_inline { + float: left; + display: block; + border: 0; +} +.datepicker_dialog { + padding: 5px !important; + border: 4px ridge #88c !important; +} +button.datepicker_trigger { + width: 25px; +} +img.datepicker_trigger { + margin: 2px; + vertical-align: middle; +} +.datepicker_prompt { + float: left; + padding: 2px; + xbackground: #d8d8d8 url(../img/dark-bg.gif) repeat; + background: transparent; + color: #008; +} +* html .datepicker_prompt { + width: 185px; +} +.datepicker_control, .datepicker_links, .datepicker_header, .datepicker { + clear: both; + float: left; + width: 100%; +} +.datepicker_control, .datepicker_links { + font-weight: bold; + font-size: 80%; + letter-spacing: 1px; +} + +.datepicker_links label { /* disabled links */ + padding: 2px 5px; + color: #88c; +} +.datepicker_clear, .datepicker_prev { + float: left; + width: 34%; +} +.datepicker_current { + float: left; + width: 30%; + text-align: center; +} +.datepicker_close, .datepicker_next { + float: right; + width: 34%; + text-align: right; +} +.datepicker_header { + padding: 1px 0 3px; + + text-align: center; + font-weight: bold; + height: 1.3em; +} +.datepicker_header select { + background: #d8d8d8 url(../img/dark-bg.gif) repeat; + color: #008; + border: 0px; + font-weight: bold; +} +.datepicker { + background: #f8f8f8 url(../img/normal-bg.gif) repeat; + color: #008; + text-align: center; + font-size: 100%; +} +.datepicker a { + display: block; + width: 100%; +} +.datepicker_titleRow { + background: #d8d8d8 url(../img/dark-bg.gif) repeat; +} +.datepicker_weekEndCell { + background: #d8d8d8 url(../img/dark-bg.gif) repeat; +} +.datepicker_daysCellOver { + background: #3c75c4 url(../img/active-bg.gif) repeat; +} +.datepicker_unselectable { + color: #88c; +} +.datepicker_today { + font-weight: bold; +} +.datepicker_currentDay { + background: #3c75c4 url(../img/active-bg.gif) repeat; +} + +/* ________ CALENDAR LINKS _______ + +** Reset link properties and then override them with !important */ +#datepicker_div a, .datepicker_inline a { + cursor: pointer; + margin: 0; + padding: 0; + background: none; + color: #000; +} +.datepicker_control a, .datepicker_links a { + padding: 2px 5px !important; +} +.datepicker_control a:hover { + background: #9dbae1 url(../img/hover-bg.gif) repeat !important; +} +.datepicker_links a:hover, .datepicker_titleRow a:hover { + background: #9dbae1 url(../img/hover-bg.gif) repeat !important; +} + +/* ___________ MULTIPLE MONTHS _________*/ + +.datepicker_multi .datepicker { + border: 1px solid #008; +} +.datepicker_oneMonth { + float: left; + width: 220px; +} +.datepicker_newRow { + clear: left; +} + +/* ___________ IE6 IFRAME FIX ________ */ + +.datepicker_cover { + display: none; /*sorry for IE5*/ + display/**/: block; /*sorry for IE5*/ + position: absolute; /*must have*/ + z-index: -1; /*must have*/ + filter: mask(); /*must have*/ + top: -4px; /*must have*/ + left: -4px; /*must have*/ + width: 200px; /*must have*/ + height: 200px; /*must have*/ +} \ No newline at end of file diff --git a/ui/demos/functional/datepicker/demo/ui.datepicker.demo.css b/ui/demos/functional/datepicker/demo/ui.datepicker.demo.css new file mode 100644 index 000000000..bcd44506c --- /dev/null +++ b/ui/demos/functional/datepicker/demo/ui.datepicker.demo.css @@ -0,0 +1,51 @@ +#tab_menu1 { margin:0.5em 0 0 0; padding:0; font-size:1em; } +.tab_group1 { clear:left; padding-top:0; display:none; } +.demoLabel { float: left; width: 18em; } +.ar_day { color: white !important; background: #eee url(img/ar.gif) no-repeat center !important; } +.au_day { color: blue !important; background: #eee url(img/au.gif) no-repeat center !important; } +.br_day { color: green !important; background: #eee url(img/br.gif) no-repeat center !important; } +.cn_day { color: red !important; background: #eee url(img/cn.gif) no-repeat center !important; } +.id_day { color: white !important; background: #eee url(img/id.gif) no-repeat center !important; } +.ie_day { color: white !important; background: #eee url(img/ie.gif) no-repeat center !important; } +.ke_day { color: red !important; background: #eee url(img/ke.gif) no-repeat center !important; } +.lb_day { color: white !important; background: #eee url(img/lb.gif) no-repeat center !important; } +.nz_day { color: blue !important; background: #eee url(img/nz.gif) no-repeat center !important; } +.se_day { color: blue !important; background: #eee url(img/se.gif) no-repeat center !important; } +.us_day { color: white !important; background: #eee url(img/us.gif) no-repeat center !important; } +.za_day { color: green !important; background: #eee url(img/za.gif) no-repeat center !important; } +code { font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; } +pre { clear: both; padding-left: 2em; } +#embedButton { width: 7em; } +#embedButton + img { position: relative; left: -21px; top: -1px; } +.tabs { + list-style: none; +} +.tabs li { + float: left; +} +.tabs li a { + display:block; + padding: 0.4em .75em; + margin: 0; + border-left: 1px solid #fff; + border-right: 1px solid #ddd; + cursor: pointer; + cursor: hand; + text-decoration: none; + color: #eee; + border-top: 1px solid #F9F9F9; +} +.tabs li a:hover, .tabs li a.over { + border-top: 1px solid #000; +} +.tab_group1 h3 { + font-weight: bold; + margin-top:15px; + border-bottom: 1px solid #ddd; +} +.nextFeature { + margin-top: 15px; +} +ol li { + margin-top: 1em; +} \ No newline at end of file diff --git a/ui/demos/functional/datepicker/demo/ui.datepicker.demo.js b/ui/demos/functional/datepicker/demo/ui.datepicker.demo.js new file mode 100644 index 000000000..762f84ac2 --- /dev/null +++ b/ui/demos/functional/datepicker/demo/ui.datepicker.demo.js @@ -0,0 +1,81 @@ +// Initialise the date picker demonstrations +$(document).ready(function () { + // initialize tab interface + tabs.init(); + // reset defaults to English + $.datepicker.setDefaults($.datepicker.regional['']); + // replace script tags with HTML code + $(".demojs").each(function () { + $(this).before( '
' +
+			$(this).html().replace(/
" ); + eval( $(this).html() ); + }); + // Localization + if ($.browser.safari) + $('.languageSelect,.l10nDatepicker,#frFullFormat').attr({ disabled: 'disabled' }); + else + $('.languageSelect').change(localise); + // Stylesheets + $('#altStyle').datepicker({buttonImage: 'demo/img/calendar2.gif', + prevText: ' Prev', + nextText: 'Next '}); + $('#button3').click(function() { + $(this).datepicker('dialog', $('#altDialog').val(), + setAltDateFromDialog, {prompt: 'Choose a date', speed: '', + prevText: ' Prev', + nextText: 'Next '}); + }); +}); + +// Load and apply a localisation package for the date picker +function localise() { + var input = $('input', this.parentNode.parentNode); + var date = $(input).datepicker('getDate'); + var language = $(this).val(); + $.localise('i18n/ui.datepicker', {language: language}); + $(input).datepicker('change', $.datepicker.regional[language]); + $.datepicker.setDefaults($.datepicker.regional['']); // Reset for general usage + if (date) { + $(input).datepicker('setDate', date); + input.val($.datepicker.formatDate( + $.datepicker.regional[language].dateFormat, date)); + } +} + +// Demonstrate a callback from inline configuration +function showDay(input) { + var date = $(input).datepicker('getDate'); + $('#inlineDay').html(date ? $.datepicker.formatDate('DD', date) : 'blank'); +} + +// Display a date selected in a "dialog" +function setAltDateFromDialog(date) { + $('#altDialog').val(date); +} + +// Custom Tabs written by Marc Grabanski +var tabs = +{ + init : function () + { + // Setup tabs + $("div[@class^=tab_group]").hide(); + $("div[@class^=tab_group]:first").show().id; + $("ul[@id^=tab_menu] a:eq(0)").addClass('over'); + + // Slide visible up and clicked one down + $("ul[@id^=tab_menu] a").each(function(i){ + $(this).click(function () { + $("ul[@id^=tab_menu] a.over").removeClass('over'); + $(this).addClass('over'); + $("div[@class^=tab_group]:visible").hide(); + $( $(this).attr("href") ).fadeIn(); + tabs.stylesheet = $(this).attr("href") == "#styles" ? 'alt' : 'default'; + $('link').each(function() { + this.disabled = (this.title != '' && this.title != tabs.stylesheet); + }); + return false; + }); + }); + } +} diff --git a/ui/demos/functional/datepicker/index.html b/ui/demos/functional/datepicker/index.html new file mode 100644 index 000000000..a2f0f34b8 --- /dev/null +++ b/ui/demos/functional/datepicker/index.html @@ -0,0 +1,887 @@ + + + + + jQuery UI Datepicker + + + + + + + + + + +
+
+

jQuery UI Datepicker v3.4.3 Examples

+ +
+
+

Defaults

+

A date picker can easily be added to an input field with default settings.

+

Default date picker: +

+ +

IE select issue: +

+

The defaults are:

+
    +
  • Date picker appears on focus
    • +
  • Text is in English
    • +
  • Date format is mm/dd/yyyy
    • +
  • Clear/Close controls show at the top
    • +
  • Month and year are selectable directly
    • +
  • 10 years before and after the selected year are shown
    • +
  • Show a single month
    • +
  • Select a single date
    • +
  • Week starts on Sunday
    • +
  • Day names are clickable to change the first day of the week
    • +
  • Days in other months are not displayed
    • +
  • No date restrictions
    • +
  • Clicking elsewhere closes the date picker
    • +
+

Processed fields are marked with a class of hasDatepicker + and are not re-processed if targetted a second time.

+

You can override the default settings that apply to all date picker instances.

+ +
+
+

Invocation

+

The date picker can be invoked in a variety of ways, as shown below. + Also shown is the use of an image only trigger, + and how the controls and buttons appear when disabled.

+

Datepicker appears on focus: + +

+ +

Appears via text button: + +

+ +

Appears both ways: + +

+ +

You can embed the trigger image within the input area via CSS.

+

Embedded button: +

+ +

Enable and disable datepicker with 'enable' and 'disable' commands.

+ +

The date picker can also be triggered externally for a particular input.

+

External trigger: +

+ +

Or even opened as a "dialog". If the blockUI plugin is available, + it is used to create a modal dialog.

+

Date picker dialog: + +

+ +
+
+

Keystrokes

+

The date picker also responds to keystrokes entered in the input field.

+

Keyboard driven: +

+

The relevant keystrokes are:

+
    +
  • page up/downprevious/next month
    • +
  • ctrl+page up/downprevious/next year
    • +
  • ctrl+homecurrent month or open when closed
    • +
  • ctrl+left/rightprevious/next day
    • +
  • ctrl+up/downprevious/next week
    • +
  • enteraccept the selected date
    • +
  • ctrl+endclose and erase the date
    • +
  • escapeclose the date picker without selection
    • +
+
+
+

Restricting

+

You can restrict the functionality of the date picker in various ways. + The first example sets the first day of the week to Monday and prevents it from being + changed, as well as preventing the month and year from being selected directly.

+

Restricted functionality: +

+ +

You can also limit the range of dates selectable within the date picker. + Here it's between 26-Jan-05 and 26-Jan-07.

+

Limited dates: +

+ +

Or set a range relative to today by specifying a number + rather than an exact date, in this case in the coming year.

+

Limited dates (relative): +

+ +

The relative dates can also be specified as a number and a period - + 'd' for days, 'w' for weeks, 'm' for months, or 'y' for years.

+

Limited dates (extended): +

+ +

Note that the range of selectable months and years changes appropriately. Also, + note that the Today link is no longer available as today is not in the range. + By default, the Prev and Next links are disabled if they are not + applicable. You can override this to remove them instead, with the + hideIfNoPrevNext setting.

+
+
+

Date Formats

+

You can set a variety of date formats for the date picker, + with the default being 'mm/dd/yy'.

+

Medium format: +

+ +

Long format: +

+ +

Full format: +

+ +

Display dates without the century. The century is then determined based on the + shortYearCutoff setting, which defaults to 10 years in the future ('+10'). + Year values less than or equal to this cutoff are interpreted as being in the current + century, while those greater than the cutoff are taken to be in the previous century.

+

No century: +

+ +

ISO date format: +

+ +

French full format: +

+ +

The formatting codes are:

+
    +
  • dday of month (no leading zero)
    • +
  • ddday of month (two digit)
    • +
  • Dday name short
    • +
  • DDday name long
    • +
  • mmonth of year (no leading zero)
    • +
  • mmmonth of year (two digit)
    • +
  • Mmonth name short
    • +
  • MMmonth name long
    • +
  • yyear (two digit)
    • +
  • yyyear (four digit)
    • +
  • '...'literal text
    • +
  • ''single quote
    • +
+
+
+

Customize

+

You can customize the selectability and/or appearance of individual days + by setting a callback function that accepts a date and returns an array + with the first entry being true/false for selectability and the second + entry being a CSS class to apply (or '' for none). One appropriate + function is built-in that prevents the selection of days on weekends.

+

No weekends: +

+ +

Or you can provide your own function. The one below highlights and + prevents selection of a set of national days.

+

National days: +

+ +

With CSS like the following:

+
.au_day { color: blue !important; background: #eee url(au.gif) no-repeat center !important; }
+
+
+

Localisation

+

You can localise the date picker for other languages and regional differences. + The date picker defaults to English with a date format of MM/DD/YYYY, + but you can easily translate the text into another language and date format.

+

+ : +

+

The presentation is slightly different for right-to-left languages.

+

+ : +

+

You need to load the appropriate language package, which + adds a language set ($.datepicker.regional[langCode]) and + automatically sets this language as the default for all date pickers.

+
<script type="text/javascript" src="ui.datepicker-fr.js"></script>
+

Thereafter, if desired, you can restore the original language settings.

+
$.datepicker.setDefaults($.datepicker.regional['']);
+

And then configure the language per date picker instance.

+ +

Localisation packages:

+

Localisation packages can be found below under Settings and Documentation.

+
+
+

Date Range

+

Use a custom field settings function to create a date range control: + two date fields, each restricting the other. The function takes an + input field as an argument and returns a settings object (anonymous).

+

Date range: + to +

+ +

Select a date range on one date picker, first click is the start date and second click is the end date. + The last example show six months in two rows of three months + with Previous and Next moving three months at a time.

+

Date range: +

+ + +

Two months with range select: +

+ +

Six months with range select: +

+ +
+
+

Miscellaneous 1

+

Set the date shown when first opening the date picker. The default is today.

+

Open at 01-Jan-2007: +

+ +

Open at 7 days from today: +

+ +

Or specify a period from today - 'd' for days, + 'w' for weeks, 'm' for months, or 'y' for years. +

Open at 2 weeks from today: +

+ +

Show the weeks of the year. Defaults to the ISO 8601 definition (weeks start + on Mondays and the first week of the year contains January 4). Change the + week calculation by setting calculateWeek to a function that + takes a date as a parameter and returns the number of the week.

+

Show week of the year: +

+ +

Additional settings let you move the Clear/Close controls + to the bottom, hide the Clear control to make the date mandatory, + display the days in other months (non-selectable), + and show a status bar (with a custom display for today). + Callback functions are also added to operate when a date + is selected and when the datepicker is closed. + If no onSelect callback is specified, the + onchange event of the input field is triggered.

+

Additional settings: +

+ +
+
+

Miscellaneous 2

+

Hide the datepicker on demand (press alt-h here) or + remove the datepicker altogether if you've finished with it.

+

Remove popup datepicker: +   +

+

Remove inline datepicker: +

+ +

(Advanced Technique)
Connect the date picker to linked drop-downs. You still need an input field, + but it is hidden following the drop-downs.

+

Linked drop-downs: + + + +

+ +
+
+

Changing Settings

+

If necessary, the datepicker settings for an input (or set of inputs) + can be changed on the fly. As an example, here we change the + animation and speed at which the datepicker appears.

+

Display animation and speed: + + +

+

Change datepicker: +

+

When the option in the select changes, the following function is called:

+ +

Date pickers can also be configured inline. + Add attributes to the input control with the namespace "date:" + corresponding to the date picker properties. + The attribute values are evaluated as JavaScript.

+

Inline configuration 1: + + blank

+

Inline configuration 2: +

+ +
+
+

Inline

+

The date picker can be used inline rather than as a popup. + Use inline mode by attaching the datepicker to a span or div element.

+ +
+ +

Show a number of months at once and set the range directly.

+

Inline range with two months:

+
+ +
+

+ Selected range is:   + +

+ +

(Advanced Technique)
+ Set initial value of inline date range to one week before and after today's date. + Set the text field to current selected date.

+

+ +

+ +
+
+

Stylesheets

+

The date picker can be formatted through the use of a stylesheet. + The default stylesheet is used in the rest of this demo + with an alternate one used here.

+

Alternate style: +

+

In a dialog: + +

+

The basic HTML structure of the date picker is shown below:

+
<div id="datepicker_div" class="datepicker_multi">
+  <div class="datepicker_control">
+    <div class="datepicker_clear"><a>Clear</a></div>
+    <div class="datepicker_close"><a>Close</a></div>
+  </div>
+  <div class="datepicker_links">
+    <div class="datepicker_prev"><a>&lt;Prev</a></div>
+    <div class="datepicker_current"><a>Today</a></div>
+    <div class="datepicker_next"><a>Next&gt;</a></div>
+  </div>
+  <div class="datepicker_oneMonth datepicker_newRow">
+    <div class="datepicker_header">
+      <select class="datepicker_newMonth"></select>
+      <select class="datepicker_newYear"></select>
+    </div>
+    <table class="datepicker" cellpadding="0" cellspacing="0">
+      <thead>
+        <tr class="datepicker_titleRow">
+          <td><a>Su</a></td><td><a>Mo</a></td>...
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="datepicker_daysRow">
+          <td class="datepicker_daysCell datepicker_weekEndCell
+            datepicker_otherMonth datepicker_unselectable">31</td>
+          <td class="datepicker_daysCell"><a>1</a></td>
+          <td class="datepicker_daysCell datepicker_daysCellOver"><a>2</a></td>
+          <td class="datepicker_daysCell datepicker_daysCellOver datepicker_currentDay"><a>3</a></td>
+          <td class="datepicker_daysCell datepicker_today"><a>4</a></td>
+          ...
+        </tr>
+        ...
+      </tbody>
+    </table>
+  </div>
+  <div class="datepicker_oneMonth">
+    ...
+  </div>
+  <div style="clear: both;"></div>
+</div>
+
+
+

Compatibility

+

v3.3 to v3.4

+

The jQuery UI interfaces changed again, so here's another compatibility module.

+

Users of v3.3 of the datepicker should use the following + header code to work with their existing implementation:

+
<link rel="stylesheet" type="text/css" href="ui.datepicker.css"/>
+<script type="text/javascript" src="ui.datepicker.js"></script>
+<script type="text/javascript" src="ui.datepicker.compatibility-3.3.js"></script>
+

Download the ui.datepicker.compatibility-3.3.js module.

+

To migrate fully, the following steps need to be taken:

+
    +
  • Replace references to the $(selector).attachDatepicker(...) + function with $(selector).datepicker(...).
    • +
  • Replace references to the $(selector).removeDatepicker() + function with $(selector).datepicker('destroy').
    • +
  • Replace references to the $(selector).datepicker.changDatepicker(...) + function with $(selector).datepicker('change', ...).
    • +
  • Replace references to the $(selector).datepicker.enableDatepicker() + function with $(selector).datepicker('enable').
    • +
  • Replace references to the $(selector).disableDatepicker() + function with $(selector).datepicker('disable').
    • +
  • Replace references to the $(selector).isDisabledDatepicker() + function with $(selector).datepicker('isDisabled').
    • +
  • Replace references to the $(selector).showDatepicker() + function with $(selector).datepicker('show').
    • +
  • Replace references to the $.datepicker.hideDatepicker() + function with $(selector).datepicker('hide').
    • +
  • Replace references to the $(selector).getDatepickerDate() + function with $(selector).datepicker('getDate').
    • +
  • Replace references to the $(selector).setDatepickerDate(...) + function with $(selector).datepicker('setDate', ...).
    • +
+

For example, this old style code:

+
$('inputs').attachDatepicker(...);
+$('inputs').changeDatepicker(...);
+

becomes:

+
$('inputs').datepicker(...);
+$('inputs').datepicker('change', ...);
+ +

v3.2 to v3.4

+

To align the datepicker more closely with other jQuery UI components, + further changes were made in v3.3, resulting in another compatibility module.

+

Users of v3.2 of the datepicker should use the following + header code to work with their existing implementation:

+
<link rel="stylesheet" type="text/css" href="ui.datepicker.css"/>
+<script type="text/javascript" src="ui.datepicker.js"></script>
+<script type="text/javascript" src="ui.datepicker.compatibility-3.2.js"></script>
+

Download the ui.datepicker.compatibility-3.2.js module.

+

To migrate fully, the following steps need to be taken:

+
    +
  • Replace references to the $.datepicker.reconfigureFor(selector, ...) + function with $(selector).datepicker('change', ...).
    • +
  • Replace references to the $.datepicker.enableFor(selector) + function with $(selector).datepicker('enable').
    • +
  • Replace references to the $.datepicker.disableFor(selector) + function with $(selector).datepicker('disable').
    • +
  • Replace references to the $.datepicker.isDisabled(selector) + function with $(selector).datepicker('isDisabled').
    • +
  • Replace references to the $.datepicker.showFor(selector) + function with $(selector).datepicker('show').
    • +
  • Replace references to the $.datepicker.getDateFor(selector) + function with $(selector).datepicker('getDate').
    • +
  • Replace references to the $.datepicker.setDateFor(selector, ...) + function with $(selector).datepicker('setDate', ...).
    • +
+

For example, this old style code:

+
$.datepicker.reconfigureFor('inputs', {...});
+

becomes:

+
$('inputs').datepicker('change', {...});
+ +

v2.x to v3.3

+

The date picker has been refactored to better fit + within the jQuery UI project. + This has involved renaming the main function and some properties, + resulting in current uses of the plugin no longer functioning correctly. + To assist in the transition to the new format a compatibility + plugin is also provided, allowing current code to continue + to operate with minimal changes.

+

Existing users of v2 of the calendar should use the following + header code to work with their existing implementation:

+
<link rel="stylesheet" type="text/css" href="ui.datepicker.css"/>
+<script type="text/javascript" src="ui.datepicker.js"></script>
+<script type="text/javascript" src="jquery-calendar-compatibility.js"></script>
+

Download the jquery-calendar-compatibility.js module.

+

To migrate fully, the following steps need to be taken:

+
    +
  • Replace references to the jquery-calendar* + files with ui.datepicker*.
    • +
  • Replace references to the popUpCal + object with $.datepicker.
    • +
  • Replace references to the calendar + function with datepicker.
    • +
  • Replace references to the autoPopUp + setting with showOn.
    • +
  • Replace references to the fieldSettings + setting with beforeShow.
    • +
  • Replace references to the customDate + setting with beforeShowDay.
    • +
  • Replace references to inline attributes with the cal: + namespace with date:.
    • +
  • Replace references to the hideCalendar + function with hideDatepicker.
    • +
  • Replace references to the dialogCalendar + function with dialogDatepicker.
    • +
  • Replace references to the $.datepicker.reconfigureFor(selector, ...) + function with $(selector).datepicker('change', ...).
    • +
  • Replace references to the $.datepicker.enableFor(selector) + function with $(selector).datepicker('enable').
    • +
  • Replace references to the $.datepicker.disableFor(selector) + function with $(selector).datepicker('disable').
    • +
  • Replace references to the $.datepicker.showFor(selector) + function with $(selector).datepicker('show').
    • +
  • Replace references to the $.datepicker.getDateFor(selector) + function with $(selector).datepicker('getDate').
    • +
  • Replace references to the $.datepicker.setDateFor(selector, ...) + function with $(selector).datepicker('setDate', ...).
    • +
  • Replace references to the calendar* + CSS styles with datepicker*.
    • +
+

For example, this old style code:

+
$('inputs').calendar({autoPopUp: 'both', fieldSettings: setDateRange,
+	customDate: popUpCal.noWeekends});
+	
+<input type="text" id="inlineConfig" cal:defaultDate="+7"/>
+

becomes:

+
$('inputs').datepicker({showOn: 'both', beforeShow: setDateRange,
+	beforeShowDay: $.datepicker.noWeekends});
+	
+<input type="text" id="inlineConfig" date:defaultDate="+7"/>
+
+ + + + + + + + + + + + + + + + \ No newline at end of file