From 84f453e424a95b122b745c28d05ab9ff37c39da2 Mon Sep 17 00:00:00 2001 From: Keith Wood Date: Wed, 11 Jun 2008 10:27:39 +0000 Subject: [PATCH] More datepicker demonstrations --- demos/functional/index.html | 34 ++- demos/functional/templates/images/ar.gif | Bin 0 -> 863 bytes demos/functional/templates/images/au.gif | Bin 0 -> 941 bytes demos/functional/templates/images/br.gif | Bin 0 -> 925 bytes .../{ => templates}/images/calendar.gif | Bin demos/functional/templates/images/cn.gif | Bin 0 -> 856 bytes demos/functional/templates/images/id.gif | Bin 0 -> 840 bytes demos/functional/templates/images/ie.gif | Bin 0 -> 875 bytes demos/functional/templates/images/ke.gif | Bin 0 -> 948 bytes demos/functional/templates/images/lb.gif | Bin 0 -> 903 bytes demos/functional/templates/images/nz.gif | Bin 0 -> 925 bytes demos/functional/templates/images/se.gif | Bin 0 -> 892 bytes demos/functional/templates/images/us.gif | Bin 0 -> 896 bytes demos/functional/templates/images/za.gif | Bin 0 -> 900 bytes .../templates/ui.datepicker.dbd.html | 35 +++ .../templates/ui.datepicker.dlg.html | 6 + demos/functional/templates/ui.datepicker.html | 288 +++++++++++++++--- .../templates/ui.datepicker.sel.html | 54 ++++ .../templates/ui.datepicker.two.html | 7 + 19 files changed, 383 insertions(+), 41 deletions(-) create mode 100644 demos/functional/templates/images/ar.gif create mode 100644 demos/functional/templates/images/au.gif create mode 100644 demos/functional/templates/images/br.gif rename demos/functional/{ => templates}/images/calendar.gif (100%) create mode 100644 demos/functional/templates/images/cn.gif create mode 100644 demos/functional/templates/images/id.gif create mode 100644 demos/functional/templates/images/ie.gif create mode 100644 demos/functional/templates/images/ke.gif create mode 100644 demos/functional/templates/images/lb.gif create mode 100644 demos/functional/templates/images/nz.gif create mode 100644 demos/functional/templates/images/se.gif create mode 100644 demos/functional/templates/images/us.gif create mode 100644 demos/functional/templates/images/za.gif create mode 100644 demos/functional/templates/ui.datepicker.dbd.html create mode 100644 demos/functional/templates/ui.datepicker.dlg.html create mode 100644 demos/functional/templates/ui.datepicker.sel.html create mode 100644 demos/functional/templates/ui.datepicker.two.html diff --git a/demos/functional/index.html b/demos/functional/index.html index a2c54176d..950dac84e 100644 --- a/demos/functional/index.html +++ b/demos/functional/index.html @@ -21,16 +21,38 @@ - - - + + + + + + + + + + + + + + + + + + + + + + + + + @@ -126,10 +148,10 @@ diff --git a/demos/functional/templates/images/ar.gif b/demos/functional/templates/images/ar.gif new file mode 100644 index 0000000000000000000000000000000000000000..f34c90f5c5d66c6d64c5a3be8b9064c98bdcf7b2 GIT binary patch literal 863 zcmZ?wbhEHblw#mz_|CwPcIN+?G=?*2#%E?SoS6wE)6Se>_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/demos/functional/templates/images/au.gif b/demos/functional/templates/images/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/demos/functional/images/calendar.gif b/demos/functional/templates/images/calendar.gif similarity index 100% rename from demos/functional/images/calendar.gif rename to demos/functional/templates/images/calendar.gif diff --git a/demos/functional/templates/images/cn.gif b/demos/functional/templates/images/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/demos/functional/templates/images/id.gif b/demos/functional/templates/images/id.gif new file mode 100644 index 0000000000000000000000000000000000000000..d7f4ab8a35d6c9d67262f266157fa107fa74bd5c GIT binary patch literal 840 zcmZ?wbhEHb6lV}%_|5Xn6pV(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/demos/functional/templates/images/ie.gif b/demos/functional/templates/images/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/demos/functional/templates/images/lb.gif b/demos/functional/templates/images/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/demos/functional/templates/images/nz.gif b/demos/functional/templates/images/nz.gif new file mode 100644 index 0000000000000000000000000000000000000000..86b89cb27bc033afb9aa2c0548d53b98b3c65196 GIT binary patch literal 925 zcmZ?wbhEHblw#mz_|Cxa|Ns9#pFiKb_xi!nbMKZeU9{-<%l`hSH8tJcI~y7{rxh%| zJN4S``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/demos/functional/templates/images/se.gif b/demos/functional/templates/images/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/demos/functional/templates/images/us.gif b/demos/functional/templates/images/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/demos/functional/templates/ui.datepicker.dbd.html b/demos/functional/templates/ui.datepicker.dbd.html new file mode 100644 index 000000000..39bc6ffca --- /dev/null +++ b/demos/functional/templates/ui.datepicker.dbd.html @@ -0,0 +1,35 @@ + + + \ No newline at end of file diff --git a/demos/functional/templates/ui.datepicker.dlg.html b/demos/functional/templates/ui.datepicker.dlg.html new file mode 100644 index 000000000..cf30239d0 --- /dev/null +++ b/demos/functional/templates/ui.datepicker.dlg.html @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/demos/functional/templates/ui.datepicker.html b/demos/functional/templates/ui.datepicker.html index c53acfbda..00b3a3e03 100644 --- a/demos/functional/templates/ui.datepicker.html +++ b/demos/functional/templates/ui.datepicker.html @@ -10,75 +10,293 @@ { title: 'Datepicker Basics', - desc: 'A date picker can easily be added to an input field with default settings.
' + - 'You can also use keystrokes to drive the datepicker:
' + - '
  • page up/down - previous/next month
    • ' + + desc: 'A datepicker can easily be added to an input field with default settings:' + + '
    • Datepicker 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
    ', + html: '\n' + + '', + destroy: '$("#basics").datepicker("destroy").removeClass();', + + options: [ + { desc: 'Default datepicker - open on focus', source: '$("#basics").datepicker();' }, + { desc: 'Open on button only', source: '$("#basics").datepicker({showOn: "button"});' }, + { desc: 'Open on image button only', source: '$("#basics").datepicker({showOn: "button", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Open on focus or button', source: '$("#basics").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Embed the button in the input (with CSS)', source: '$("#basics").datepicker({showOn: "button", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).addClass("embed");' }, + { desc: 'Disabled datepicker', source: '$("#basics").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).datepicker("disable");' } + ] + }, + + { + title: 'Keystrokes', + desc: 'You can use the keyboard to enter dates and to control the datepicker:' + + '
    • page up/down - previous/next month
      • ' + '
    • ctrl+page up/down - previous/next year
      • ' + '
    • ctrl+home - current month or open when closed
      • ' + '
    • ctrl+left/right - previous/next day
      • ' + '
    • ctrl+up/down - previous/next week
      • ' + '
    • enter - accept the selected date
      • ' + '
    • ctrl+end - close and erase the date
      • ' + - '
    • escape - close the date picker without selection
    ', - html: '', - destroy: '$("#basics").datepicker("destroy");', + '
  • escape - close the datepicker without selection
', + html: '', + destroy: '$("#keys").datepicker("destroy").attr("readonly", "");', options: [ - { desc: 'Default datepicker - open on focus', source: '$("#basics").datepicker();' }, - { desc: 'Open on button only', source: '$("#basics").datepicker({showOn: "button"});' }, - { desc: 'Open on image button only', source: '$("#basics").datepicker({showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Open on focus or button', source: '$("#basics").datepicker({showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Disabled datepicker', source: '$("#basics").datepicker({showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true}).datepicker("disable");' } + { desc: 'Default datepicker', source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'No keystroke entry', source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).attr("readonly", "readonly");' } ] }, { title: 'Restricting Datepicker', - desc: 'A date picker can have its basic functionality restricted in various ways.', + desc: 'A datepicker can have its basic functionality restricted in various ways.', html: '', destroy: '$("#restricting").datepicker("destroy");', options: [ - { desc: 'First day of week is Monday and can\'t change it', source: '$("#restricting").datepicker({firstDay: 1, changeFirstDay: false, showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Can\'t change month/year from dropdowns', source: '$("#restricting").datepicker({changeMonth: false, changeYear: false, showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Dates from Jan 26 2005 to Jan 26 2007 only', source: '$("#restricting").datepicker({minDate: new Date(2005, 1 - 1, 26), maxDate: new Date(2007, 1 - 1, 26), showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Dates within the next 365 days only', source: '$("#restricting").datepicker({minDate: 0, maxDate: 365, showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Dates from yesterday to 6 years away only', source: '$("#restricting").datepicker({minDate: "-1d", maxDate: "6y", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' } + { desc: 'First day of week is Monday and can\'t change it', source: '$("#restricting").datepicker({firstDay: 1, changeFirstDay: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Can\'t change month/year from dropdowns', source: '$("#restricting").datepicker({changeMonth: false, changeYear: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Year dropdown shows last 20 years', source: '$("#restricting").datepicker({yearRange: "-20:+0", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Year dropdown shows 2000 to 2010', source: '$("#restricting").datepicker({yearRange: "2000:2010", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Dates from Jan 26 2005 to Jan 26 2007 only', source: '$("#restricting").datepicker({minDate: new Date(2005, 1 - 1, 26), maxDate: new Date(2007, 1 - 1, 26), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Dates within the next 365 days only', source: '$("#restricting").datepicker({minDate: 0, maxDate: 365, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Dates from yesterday to 6 years away only', source: '$("#restricting").datepicker({minDate: "-1d", maxDate: "6y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } ] }, { - title: 'Datepicker Formats', - desc: 'A date picker can display its value in numerous formats, with the default being "mm/dd/yy".', + title: 'Date Formats', + desc: 'A datepicker can display its value in numerous formats, with the default being "mm/dd/yy". ' + + 'The formatting codes are:' + + '
  • d - day of month (no leading zero)
    • ' + + '
  • dd - day of month (two digit)
    • ' + + '
  • D - day name short
    • ' + + '
  • DD - day name long
    • ' + + '
  • m - month of year (no leading zero)
    • ' + + '
  • mm - month of year (two digit)
    • ' + + '
  • M - month name short
    • ' + + '
  • MM - month name long
    • ' + + '
  • y - year (two digit)
    • ' + + '
  • yy - year (four digit)
    • ' + + '
  • \'...\' - literal text
    • ' + + '
  • \'\' - single quote
', html: '', destroy: '$("#formatted").datepicker("destroy");', options: [ - { desc: 'Medium format', source: '$("#formatted").datepicker({dateFormat: "M d, yy", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Long format', source: '$("#formatted").datepicker({dateFormat: "MM d, yy", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Full format', source: '$("#formatted").datepicker({dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'With no century', source: '$("#formatted").datepicker({dateFormat: "dd/mm/y", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'French full format', source: '$("#formatted").datepicker($.datepicker.regional["fr"]).datepicker("change", {dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' } + { desc: 'Medium format', source: '$("#formatted").datepicker({dateFormat: "M d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Long format', source: '$("#formatted").datepicker({dateFormat: "MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Full format', source: '$("#formatted").datepicker({dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'ISO format', source: '$("#formatted").datepicker({dateFormat: "yy-mm-dd", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'With no century', source: '$("#formatted").datepicker({dateFormat: "dd/mm/y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'French full format', source: '$("#formatted").datepicker($.extend({}, $.datepicker.regional["fr"], {dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' } + ] + }, + + { + title: 'Day-by-day Modifications', + desc: 'You have several mechanisms for modifying the datepicker\'s appearance on a day-by-day basis.', + html: { url: 'templates/ui.datepicker.dbd.html' }, + destroy: '$("#dayByDay").datepicker("destroy");', + + options: [ + { desc: 'Weekends are not selectable', source: '$("#dayByDay").datepicker({beforeShowDay: $.datepicker.noWeekends, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Highlight some national days (via CSS)', source: '$("#dayByDay").datepicker({beforeShowDay: nationalDays, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Customise status line for today', source: '$("#dayByDay").datepicker({showStatus: true, statusForDate: highlightToday, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } + ] + }, + + { + title: 'Date Ranges', + desc: 'Choose a range of dates instead of a single one by clicking firstly on the starting date, then on the ending date.', + html: '', + destroy: '$("#ranges").datepicker("destroy");', + + options: [ + { desc: 'Range select with a single month', source: '$("#ranges").datepicker({rangeSelect: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Range select showing two months', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Range select showing six months (moving three at a time)', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: [2, 3], stepMonths: 3, prevText: "<< Previous Months", nextText: "Next Months >>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } + ] + }, + + { + title: 'Another Date Range', + desc: 'Synchronise two datepickers to together select a date range.', + html: { url: 'templates/ui.datepicker.two.html' }, + destroy: '$("#startDate,#endDate").datepicker("destroy");', + + options: [ + { desc: 'Range select with two datepickers', source: '$("#startDate,#endDate").datepicker({beforeShow: customRange, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } + ] + }, + + { + title: 'Inline Datepicker', + desc: 'A datepicker can also be shown inline, rather than popping-up, by targetting a division instead of an input field. ' + + 'Use the onSelect callback to be notified of date selections.', + html: '

', + destroy: '$("#inline").datepicker("destroy");', + + options: [ + { desc: 'Single month inline', source: '$("#inline").datepicker();' }, + { desc: 'Range select inline', source: '$("#inline").datepicker({rangeSelect: true});' }, + { desc: 'Range select showing two months inline', source: '$("#inline").datepicker({rangeSelect: true, numberOfMonths: 2}).children("div").css("width", "370px");' } + ] + }, + + { + title: 'Datepicker in a Dialog', + desc: 'A datepicker can also be opened within a "dialog" box.', + html: { url: 'templates/ui.datepicker.dlg.html' }, + destroy: '', + + options: [ + { desc: 'Open in a dialog', source: '$("#dialogButton").click(function() { $(this).datepicker("dialog", $("#dialog").val(), setDateFromDialog, {prompt: "Choose a date", speed: ""}) });' } + ] + }, + + { + title: 'Datepicker Linked to Dropdowns', + desc: 'With a bit of wiring code, you can link the datepicker with three dropdowns for date selection.', + html: { url: 'templates/ui.datepicker.sel.html' }, + destroy: '', + + options: [ + { desc: 'Linked to dropdowns', source: '$("#linkedDates").datepicker({minDate: new Date(2001, 1 - 1, 1), maxDate: new Date(2010, 12 - 1, 31), beforeShow: readLinked, onSelect: updateLinked, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}); $("#selectMonth, #selectYear").change(checkLinkedDays);' } + ] + }, + + { + title: 'Callbacks', + desc: 'Custom functions may be invoked when certain events occur within the datepicker.', + html: '', + destroy: '$("#callbacks").datepicker("destroy");', + + options: [ + { desc: 'On select', source: '$("#callbacks").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'On close', source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with date " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } + ] + }, + + { + title: 'Default Date', + desc: 'Control which date is shown if the datepicker is opened with no value. The default is today.', + html: '', + destroy: '$("#defaultDate").datepicker("destroy");', + + options: [ + { desc: 'January 1, 2007', source: '$("#defaultDate").datepicker({defaultDate: new Date(2007, 1 - 1, 1), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: '7 days from today', source: '$("#defaultDate").datepicker({defaultDate: +7, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: '2 weeks from today', source: '$("#defaultDate").datepicker({defaultDate: "+2w", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } + ] + }, + + { + title: 'Miscellaneous', + desc: 'There are many other miscellaneous settings you can apply.', + html: '', + destroy: '$("#misc").datepicker("destroy");', + + options: [ + { desc: 'Append text to the datepicker', source: '$("#misc").datepicker({appendText: "(format mm/dd/yyyy)", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Show days from other months', source: '$("#misc").datepicker({showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Show week of the year (ISO 8601)', source: '$("#misc").datepicker({showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Move Clear/Close controls to the bottom', source: '$("#misc").datepicker({closeAtTop: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Make the datepicker mandatory (no Clear)', source: '$("#misc").datepicker({mandatory: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Hide Prev/Next links if not applicable', source: '$("#misc").datepicker({hideIfNoPrevNext: true, minDate: new Date(2008, 1 - 1, 26), maxDate: new Date(2008, 3 - 1, 26), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Show a status bar with more explanation', source: '$("#misc").datepicker({showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } + ] + }, + + { + title: 'Inline Configuration', + desc: 'You can configure each input field inline by adding attributes with the same name '+ + 'as the datepicker settings and a "date:" prefix.', + html: '', + destroy: '$("#config").datepicker("destroy");', + + options: [ + { desc: 'Inline configuration - see source', source: '$("#config").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } + ] + }, + + { + title: 'Animations', + desc: 'You can control how the datepicker appears - both its style and speed. The default is a medium speed animation expanding from the top-left (show).', + html: '', + destroy: '$("#anim").datepicker("destroy");', + + options: [ + { desc: 'Show at slow speed', source: '$("#anim").datepicker({speed: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Show at medium speed (default)', source: '$("#anim").datepicker({speed: "normal", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Show at fast speed', source: '$("#anim").datepicker({speed: "fast", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Show immediately', source: '$("#anim").datepicker({speed: "", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Fade in at medium speed', source: '$("#anim").datepicker({showAnim: "fadeIn", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Slide down at medium speed', source: '$("#anim").datepicker({showAnim: "slideDown", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } ] }, { title: 'International Datepickers', desc: 'Numerous international packs are available for the datepicker.', - html: '', + html: ' thanks to ', destroy: '$("#i18n").datepicker("destroy");', options: [ - { desc: '简体中文 (Chinese Simplified)', source: '$("#i18n").datepicker($.datepicker.regional["zh-CN"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: '簡體中文 (Chinese Traditional)', source: '$("#i18n").datepicker($.datepicker.regional["zh-TW"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Bahasa Indonesia (Indonesian)', source: '$("#i18n").datepicker($.datepicker.regional["id"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'български език (Bulgarian)', source: '$("#i18n").datepicker($.datepicker.regional["bg"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Català (Catalan)', source: '$("#i18n").datepicker($.datepicker.regional["ca"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Čeština (Czech)', source: '$("#i18n").datepicker($.datepicker.regional["cs"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Dansk (Danish)', source: '$("#i18n").datepicker($.datepicker.regional["da"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Deutsch (German)', source: '$("#i18n").datepicker($.datepicker.regional["de"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Español (Spanish)', source: '$("#i18n").datepicker($.datepicker.regional["es"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Français (French)', source: '$("#i18n").datepicker($.datepicker.regional["fr"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' } + { desc: '简体中文 (Chinese Simplified)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["zh-CN"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Cloudream");' }, + { desc: '簡體中文 (Chinese Traditional)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["zh-TW"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Ressol");' }, + { desc: 'Bahasa Indonesia (Indonesian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["id"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Deden Fathurahman");' }, + { desc: 'български език (Bulgarian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["bg"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Stoyan Kyosev");' }, + { desc: 'Català (Catalan)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ca"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Joan Leon");' }, + { desc: 'Čeština (Czech)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["cs"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Tomas Muller");' }, + { desc: 'Dansk (Danish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["da"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jan Christensen");' }, + { desc: 'Deutsch (German)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["de"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Milian Wolff");' }, + { desc: 'Español (Spanish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["es"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vester");' }, + { desc: 'Français (French)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fr"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Stéphane Nahmani");' }, + { desc: '한국어 (Korean)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ko"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("DaeKwon Kang");' }, + { desc: 'Հայերեն (Armenian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hy"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Levon Zakaryan");' }, + { desc: 'Íslenska (Icelandic)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["is"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Haukur H. Thorsson");' }, + { desc: 'Italiano (Italian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["it"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Apaella");' }, + { desc: 'Magyar (Hungarian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hu"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Istvan Karaszi");' }, + { desc: 'Nederlands (Dutch)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["nl"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("???");' }, + { desc: '日本語 (Japanese)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ja"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Milly");' }, + { desc: 'Latviešu Valoda (Latvian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["lv"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Arturas Paleicikas");' }, + { desc: 'lietuvių kalba (Lithuanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["lt"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Arturas Paleicikas");' }, + { desc: 'Norsk (Norwegian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["no"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Naimdjon Takhirov");' }, + { desc: 'Phasa thai (Thai)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["th"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("pipo");' }, + { desc: 'Polski (Polish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["pl"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jacek Wysocki");' }, + { desc: 'Português (Portuguese/Brazilian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["pt-BR"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Leonildo Costa Silva");' }, + { desc: 'Română (Romanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ro"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Edmond L.");' }, + { desc: 'Русский (Russian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ru"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Andrew Stromnov");' }, + { desc: 'Slovenčina (Slovak)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sk"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vojtech Rinik");' }, + { desc: 'suomi (Finnish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fi"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Harri Kilpiö");' }, + { desc: 'Svenska (Swedish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sv"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Anders Ekdahl");' }, + { desc: 'Türkçe (Turkish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["tr"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Izzet Emre Erkan");' }, + { desc: 'Українська (Ukranian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["uk"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Maxim Drogobitskiy");' } + ] + }, + + { + title: 'International Datepickers Right-to-left', + desc: 'Some international packs change the orientation of the datepicker to right-to-left.', + html: ' thanks to ', + destroy: '$("#i18nrtl").datepicker("destroy");', + + options: [ + { desc: '‫العربية (Arabic)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["ar"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Khaled Al Horani");' }, + { desc: '‫עברית (Hebrew)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["he"], {showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Amir Hardon");' } ] } diff --git a/demos/functional/templates/ui.datepicker.sel.html b/demos/functional/templates/ui.datepicker.sel.html new file mode 100644 index 000000000..cc8ff25e3 --- /dev/null +++ b/demos/functional/templates/ui.datepicker.sel.html @@ -0,0 +1,54 @@ + + + +

+ diff --git a/demos/functional/templates/ui.datepicker.two.html b/demos/functional/templates/ui.datepicker.two.html new file mode 100644 index 000000000..639aa0518 --- /dev/null +++ b/demos/functional/templates/ui.datepicker.two.html @@ -0,0 +1,7 @@ + to + \ No newline at end of file