-

Ajax Calendar
<b>Control with topright:</b> <asp:TextBox ID="txtDate3" runat="server" Wi th="!""> </asp:TextBox> <ajaxtool#it:calendarexten er ID="$al%xten er3" runat="server" &opupButtonID="btnDate3" &opup&osition="Top'ight" TargetControlID="txtDate3" > </ajaxtool#it:calendarexten er> <asp:I(ageButton ID="btnDate3" I(age)rl="*/i(ages/CalendarI$on+,pg" Wi th="-"px" runat="server" />

S kin trong asp.net

<b>Control with no ate earlier than to a.:</b> <asp:TextBox ID="txtDate/" runat="server" Wi th="!""></asp:TextBox> <ajaxtool#it:calendarexten er ID="$al%xten er/" runat="server" &opupButtonID="btnDate/" &opup&osition="Top'ight" TargetControlID="txtDate/" 0nClientDate1ele$tionChange ="Che$#Date%alier"> </ajaxtool#it:calendarexten er> <asp:I(ageButton ID="btnDate/" I(age)rl="*/i(ages/CalendarI$on+,pg" Wi th="-"px" runat="server" />

2avas$ript #i3( tra ng4. $h5n trong 6,ax Calen ar <title>Ajax Calendar Control</title> <s$ript t.pe="text/,avas$ript"> 7un$tion Che$#Date%alier8sen er9args: ; i7 8sen er+<sele$te Date < new Date8:: ; alert8"=ou $annot sele$t a a. be7ore to a.>":? sen er+<sele$te Date = new Date8:? // set the date back to the today sen er+<textbox+set<@alue8sen er+<sele$te Date+7or(at8sen er+<7or(at:: A A </s$ript>

Link ti liu http://demos.telerik.com/aspnetajax/calendar/examples/datetimepicker/overview/defaultcs.aspx

!" #a$e Code%ile&'(efaultCS.aspx.cs' Lan$ua$e&'c)' Auto*vent+ireup&'true' ,nherits&'-elerik.+e..*xamples.Calendar.(ate-ime#icker./verview.(efaultCS' !0 !" !" !" !" 1e$ister 1e$ister 1e$ister 1e$ister -a$#refix&'2sf' -a$3ame&'%ooter' Src&'4/Common/%ooter.ascx' !0 -a$#refix&'2sf' -a$3ame&'5ead-a$' Src&'4/Common/5ead-a$.ascx' !0 -a$#refix&'2sf' -a$3ame&'5eader' Src&'4/Common/5eader.ascx' !0 -a$#refix&'telerik' 3amespace&'-elerik.+e..6,' Assem.l7&'-elerik.+e..6,'

!0 !" 1e$ister -a$#refix&'2sf' 3amespace&'-elerik.8uickStart' !0 9(/C-:#* html #6;L,C '-//+<C//(-( =5->L ?.?//*3' 'http://www.w<.or$/-1/xhtml??/(-(/xhtml??.dtd'0 html xmlns&'http://www.w<.or$/?@@@/xhtml'0 head runat&'server'0 2sf:5ead-a$ runat&'server' ,(&'5eadta$?'0 /2sf:5ead-a$0 /head0 .od7 class&';/(:'0 form id&'%orm?' method&'post' runat&'server'0 2sf:5eader ,(&'5eader?' runat&'server' 3avi$ationLan$ua$e&'CS'0 /2sf:5eader0 telerik:1adScript>ana$er ,(&'1adScript>ana$er?' runat&'server' /0 telerik:1ad%orm(ecorator ,(&'1ad%orm(ecorator?' runat&'server' /0 telerik:1adAjax>ana$er ,(&'1adAjax>ana$er?' runat&'server' 6pdate#anels1ender>ode&',nline'0 AjaxSettin$s0 telerik:AjaxSettin$ AjaxControl,(&'chkShow5ide-ime#op6p'0 6pdatedControls0 telerik:Ajax6pdatedControl Control,(&'1ad-ime#icker?' Loadin$#anel,(&'1adAjaxLoadin$#anel?' /0 /6pdatedControls0 /telerik:AjaxSettin$0 telerik:AjaxSettin$ AjaxControl,(&'chkShow#op6p/n%ocus'0 6pdatedControls0 telerik:Ajax6pdatedControl Control,(&'1ad-ime#icker?' Loadin$#anel,(&'1adAjaxLoadin$#anel?' /0 /6pdatedControls0 /telerik:AjaxSettin$0 telerik:AjaxSettin$ AjaxControl,(&'chk*na.leShadows'0 6pdatedControls0 telerik:Ajax6pdatedControl Control,(&'1ad-ime#icker?' Loadin$#anel,(&'1adAjaxLoadin$#anel?' /0 /6pdatedControls0 /telerik:AjaxSettin$0 telerik:AjaxSettin$ AjaxControl,(&'.tn-ool-ip'0 6pdatedControls0 telerik:Ajax6pdatedControl Control,(&'1ad-ime#icker?' Loadin$#anel,(&'1adAjaxLoadin$#anel?' /0 /6pdatedControls0 /telerik:AjaxSettin$0 telerik:AjaxSettin$ AjaxControl,(&'.tnAppl7Start*nd-ime'0 6pdatedControls0 telerik:Ajax6pdatedControl Control,(&'1ad-ime#icker?' Loadin$#anel,(&'1adAjaxLoadin$#anel?' /0 /6pdatedControls0 /telerik:AjaxSettin$0 telerik:AjaxSettin$ AjaxControl,(&'ddl-ime,nterval'0 6pdatedControls0 telerik:Ajax6pdatedControl Control,(&'1ad-ime#icker?' Loadin$#anel,(&'1adAjaxLoadin$#anel?' /0 /6pdatedControls0 /telerik:AjaxSettin$0 telerik:AjaxSettin$ AjaxControl,(&'ddl%ormat'0 6pdatedControls0 telerik:Ajax6pdatedControl Control,(&'1ad-ime#icker?' Loadin$#anel,(&'1adAjaxLoadin$#anel?' /0 /6pdatedControls0 /telerik:AjaxSettin$0 telerik:AjaxSettin$ AjaxControl,(&'ddl-imeAiewLa7out'0 6pdatedControls0 telerik:Ajax6pdatedControl Control,(&'1ad-ime#icker?'

Loadin$#anel,(&'1adAjaxLoadin$#anel?' /0 /6pdatedControls0 /telerik:AjaxSettin$0 telerik:AjaxSettin$ AjaxControl,(&'ddl#opup(irection'0 6pdatedControls0 telerik:Ajax6pdatedControl Control,(&'1ad-ime#icker?' Loadin$#anel,(&'1adAjaxLoadin$#anel?' /0 /6pdatedControls0 /telerik:AjaxSettin$0 telerik:AjaxSettin$ AjaxControl,(&'r.l1ender(irection'0 6pdatedControls0 telerik:Ajax6pdatedControl Control,(&'r.l1ender(irection' /0 telerik:Ajax6pdatedControl Control,(&'1ad-ime#icker?' Loadin$#anel,(&'1adAjaxLoadin$#anel?' /0 /6pdatedControls0 /telerik:AjaxSettin$0 /AjaxSettin$s0 /telerik:1adAjax>ana$er0 telerik:1adAjaxLoadin$#anel ,(&'1adAjaxLoadin$#anel?' runat&'server' /0 div st7le&'hei$ht: BCpx'0 /div0 span st7le&'mar$in-ri$ht: BpxD'0Select time: /span0 telerik:1ad-ime#icker ,(&'1ad-ime#icker?' runat&'server' E,ndex&'<CCC?' /0 div st7le&'hei$ht: BCpx'0 /div0 2sf:Confi$urator#anel runat&'server' ,(&'Confi$uration#anel?' -itle&'Confi$urator' *xpanded&'true'0 ta.le0 tr0 td0 <asp:CheckBox runat="server" ID="chkShowHideTimePop p" Text="Show!hide time popup "utton" #utoPostBack="True" $nCheckedChan%ed="chkShowHideTimePop p&CheckedChan%ed"'<!asp:CheckBox ' .r /0 <asp:CheckBox runat="server" ID="chkShowPop p$n(ocus" Text="Show popup on )ocus" #utoPostBack="True" $nCheckedChan%ed="chkShowPop p$n(ocus&CheckedChan%ed"'<!asp:CheckBox' .r /0 <asp:CheckBox runat="server" ID="chk*na"+eShadows" Text="*na"+e shadows" #utoPostBack="True" $nCheckedChan%ed="chk*na"+eShadows&CheckedChan%ed"'<!asp:CheckBox' ta.le0 tr0 td0 /td0 td st7le&'width: ?BCpxD'0 <asp:Compare,a+idator ID="Start*ndTimeCompare,a+idator" runat="server" Contro+To,a+idate="txtBox*ndTime" Contro+ToCompare="txtBoxStartTime" T-pe="Inte%er" $perator=".reaterThan" *rror/essa%e="*nd time must "e %reater than start time" !' /td0 /tr0 tr0 td0 Start time: /td0 td0 telerik:1ad3umeric-ext;ox ,(&'txt;oxStart-ime' runat&'server'

>inAalue&'C' >axAalue&'F<' 3um.er%ormat-Allow1oundin$&'false' 3um.er%ormatGeep3ot1oundedAalue&'true' /0 /td0 td rowspan&'<'0 <asp:Button ID=""tn#pp+-Start*ndTime" runat="server" Text="#pp+- start!end time" $nC+ick=""tn#pp+-Start*ndTime&C+ick" 0idth="1223" !' /td0 /tr0 tr0 td0 *nd time: /td0 td0 telerik:1ad3umeric-ext;ox ,(&'txt;ox*nd-ime' runat&'server' >inAalue&'C' >axAalue&'F<' 3um.er%ormat-Allow1oundin$&'false' 3um.er%ormatGeep3ot1oundedAalue&'true' /0 /td0 /tr0 tr0 td0 ,nterval: /td0 td0 <asp:DropDown4ist ID="dd+TimeInterva+" runat="server" 0idth="152px" #utoPostBack="True" $nSe+ectedIndexChan%ed="dd+TimeInterva+&Se+ectedIndexChan%ed"' asp:List,tem Aalue&'?C'0?C min /asp:List,tem0 asp:List,tem Aalue&'?B'0?B min /asp:List,tem0 asp:List,tem Aalue&'<C'0<C min /asp:List,tem0 asp:List,tem Aalue&'?'0HC min IdefaultJ /asp:List,tem0 /asp:(rop(ownList0 /td0 /tr0 /ta.le0 .r /0 ta.le0 tr0 td0 Set tooltip: /td0 td0 asp:-ext;ox ,(&'tooltip;ox' runat&'server' +idth&'FCCpx' /0 /td0 td0 asp:;utton ,(&'.tn-ool-ip' runat&'server' -ext&'Appl7 tooltip' /nClick&'.tn-ool-ipKClick' /0 /td0 /tr0 /ta.le0 /td0 td0 Choose format for -imeAiew and (ate,nput: .r /0 asp:(rop(ownList ,(&'ddl%ormat' runat&'server' +idth&'LC!' Auto#ost;ack&'-rue' /nSelected,ndexChan$ed&'ddl%ormatKSelected,ndexChan$ed'0 asp:List,tem Aalue&'t'0t IdefaultJ /asp:List,tem0 asp:List,tem Aalue&'55:mm'055:mm /asp:List,tem0 asp:List,tem Aalue&'55:mm:ss'055:mm:ss /asp:List,tem0

/asp:(rop(ownList0 .r /0 .r /0 3um.er of columns in -imeAiew: <asp:DropDown4ist runat="server" ID="dd+Time,iew4a-out" 0idth="623" #utoPostBack="True" $nSe+ectedIndexChan%ed="dd+Time,iew4a-out&Se+ectedIndexChan%ed"' asp:List,tem Aalue&'F'0F columns /asp:List,tem0 asp:List,tem Aalue&'<'0< columns IdefaultJ /asp:List,tem0 asp:List,tem Aalue&'M'0M columns /asp:List,tem0 asp:List,tem Aalue&'B'0B columns /asp:List,tem0 /asp:(rop(ownList0 .r /0 .r /0 Select popup expand direction: <asp:DropDown4ist runat="server" ID="dd+PopupDirection" 0idth="623" #utoPostBack="True" $nSe+ectedIndexChan%ed="dd+PopupDirection&Se+ectedIndexChan%ed"' asp:List,tem Aalue&';ottom1i$ht'0;ottom1i$htIdefaultJ /asp:List,tem0 asp:List,tem Aalue&';ottomLeft'0;ottomLeft /asp:List,tem0 asp:List,tem Aalue&'-op1i$ht'0-op1i$ht /asp:List,tem0 asp:List,tem Aalue&'-opLeft'0-opLeft /asp:List,tem0 /asp:(rop(ownList0 /td0 td st7le&'width: ?BCpxD'0 Select renderin$ direction: .r /0 asp:1adio;uttonList ,(&'r.l1ender(irection' runat&'server' Auto#ost;ack&'-rue' /nSelected,ndexChan$ed&'r.l1ender(irectionKSelected,ndexChan$ed'0 asp:List,tem Aalue&'?'01ender in 1ows /asp:List,tem0 asp:List,tem Aalue&'F'01ender in Columns /asp:List,tem0 /asp:1adio;uttonList0 /td0 /tr0 /ta.le0 /2sf:Confi$urator#anel0 2sf:%ooter ,(&'%ooterF' runat&'server'0 /2sf:%ooter0 /form0 /.od70 /html0

Calendar Extender

If you want to popup a Calendar on the click of a button, you can use set the PopupButtonID of the CalendarExtender to the ID of the button. In this case, we will be using an ImageButton as shown below <asp:I(ageButton runat="1erver" ID="I(ageButtonB" I(age)rl="*/I(ages/I$ onB+,pg"6lternateText="Cli$# here to ispla. $alen ar" /> <asp:TextBox ID="TextBoxB" runat="server"></asp:TextBox> <$$B:Calen ar%xten er ID="Calen ar%xten erB" runat="server" TargetControlID="TextBoxB" &opupButtonID="I(ageButtonB"/>

If you are using an earlier !ersion of the toolkit, you may obser!e that the ImageButton causes a postback when you click on it again, to close the Calendar. "o a!oid the postback, use a #"$% Image Control instead of the &er!er side Image Control as shown below <i(g alt="I$on" sr$="/I(ages/I$onB+,pg" i ="I(ageB" /> <asp:TextBox ID="TextBoxB" runat="server"></asp:TextBox> <$$B:Calen ar%xten er ID="Calen ar%xten erB" runat="server" TargetControlID="TextBoxB" &opupButtonID="I(ageB"/> Note: In case you are clicking on the textbox to open the calendar, then in earlier !ersions of the toolkit, the calendar would not hide automatically when the user clicked anywhere outside the Calendar control. #owe!er this was fixed in the later !ersions. In fact, in the latest !ersion, the Calendar hides automatically when a date is selected. If for some reason you are facing issues with the Calendar not hiding automatically, make sure that you ha!e the latest !ersion of the '(') Control "oolkit. Tip 2: How to Add a CalendarExtender to a GridView If you want to add a CalendarExtender to a *rid+iew, use a template field with a "extBox and CalendarExtender as shown below <7or( i ="7or(B" runat="server"> <asp:1$riptCanager ID="1$riptCanagerB" runat="server" /> < iv> <asp:Dri @iew ID="Dri @iewB" runat="server" 6utoDenerateColu(ns="Ealse "DataFe.Ga(es="Categor.ID" Data1our$eID="1HlData1our$eB" 1howEooter="true" 6llow&aging="True" 6llow1orting="True"> <Colu(ns> <asp:Boun Eiel DataEiel ="Categor.ID" Iea erText="Categor.ID" 1ort%xpression="Categor.ID" /> <asp:Boun Eiel DataEiel ="Categor.Ga(e" Iea erText="Categor .Ga(e" 1ort%xpression="Categor.Ga(e" /> <asp:TemplateField> <ItemTemplate> <asp:TextBox ID="TextBox1" runat="server">< asp:TextBox> <cc1:Calendar!xtender ID="Calendar!xtender1" runat="server "Tar"etControlID="TextBox1" > < ItemTemplate> < asp:TemplateField> </Colu(ns> </asp:Dri @iew> <asp:1HlData1our$e ID="1HlData1our$eB" runat="server" Conne$tion1tring ="Data 1our$e=1)&'0TIC?Initial Catalog=Gorthwin ?Integrate 1e$urit.=True" 1ele$tCo((an ="1%J%CT KCategor.IDL9 KCategor.Ga(eL E'0C KCategoriesL" > </asp:1HlData1our$e> </ iv> </7or(> Tip 3: Enable Year Navigation in CalendarExtender ,hen the calendar appears, click on the title of the calendar to change the !iew to $onths in the current year. Clicking it again, switches the !iew to -ears, showing ./ years at a time. If you plan to do this programmatically, here0s some code for you. 1se the 2nClient&hown

e!ent and switch the mode using 3a!ascript. "his tip was shared by one of the $icrosoft4 support person at the asp.net forums. <asp:TextBox ID="TextBoxB" runat="server"></asp:TextBox> <$$B:Calen ar%xten er ID="Calen ar%xten erB" runat="server" TargetControlID="TextBoxB" 0nClient1hown="ChangeCalen ar@iew" / > "hen add this to the 5head6 section <hea runat="server"> <title>Calen ar%xten er</title> <s$ript t.pe="text/,avas$ript"> 7un$tion ChangeCalen ar@iew8sen er9args: ; sen er+<swit$hCo e8".ears"9 true:? A </s$ript> </hea > Tip 4: Displa onl t!e da and "ont! in t!e CalendarExtender "o select only the day and month without the year, use the 7ormat property of the CalendarExtender and set it to 8dd9$$: as shown below <$$B:Calen ar%xten er ID="Calen ar%xten erB" runat="server" Eor(at=" /CC"Targ etControlID="TextBoxB" /> Tip #: How to $et C%lt%re to wor& wit! CalendarExtender $ake sure that the &cript$anager has Enable&cript*lobali;ation<=true= and Enable&cript%ocali;ation<=true=. <asp:1$riptCanager ID="1$riptCanagerB" runat="server" %nable1$riptDlobaliMation="true" %nable1$riptJo$aliMation="true" /> Tip ': How to "a&e s%re %ser does not sele(t a date earlier t!an toda or greater t!an toda "here could be instances where you do not want the user to select a day earlier than the current date. 7or example when you are pro!iding the user a form to book tickets, you would not like him to choose an earlier date. "o achie!e this re>uirement, use the following 3a!ascript code. Pre!ent the 1ser from selecting a Date Earlier than today <hea runat="server"> <title>Calen ar %xten er</title> <s$ript t.pe="text/,avas$ript"> 7un$tion $he$#Date8sen er9args: ; i7 8sen er+<sele$te Date < new Date8:: ; alert8"=ou $annot sele$t a a. earlier than to a.>":? sen er+<sele$te Date = new Date8:? // set the ate ba$# to the $urrent ate sen er+<textbox+set<@alue8sen er+<sele$te Date+7or(at8sen er+<7or(at:: A A </s$ript> </hea > Call the code

<7or( i ="7or(B" runat="server"> <asp:1$riptCanager ID="1$riptCanagerB" runat="server" /> < iv> <asp:TextBox ID="TextBoxB" runat="server"></asp:TextBox> <$$B:Calen ar%xten er ID="Calen ar%xten erB" runat="server"0nClientDate1ele$tionChange ="$he$#Date" TargetContr olID="TextBoxB" /> </ iv> </7or(> &elect Date *reater than today In the 3a!ascript, 3ust change this line sen er+<sele$te Date > new Date8: Note: -ou may argue that the user can still change the date by typing into the textbox or entering an in!alid date. ,ell that can be easily handled using a +alidationControl and is co!ered in the next tip. Tip ): Add validation to t!e CalendarExtender Control ' simple way to add !alidation to the Calendar is to add a +alidationControl to the textbox associated with a CalendarExtender. -ou ha!e two choices '. 'dd an ?Extender0 to the +alidationControl. "o do so, drag and drop a +alidationControl 6 click on the smart tag of the +alidationControl 6 choose ?'dd Extender0. 7rom the Extender ,i;ard, choose +alidatorCalloutExtender. 1sing this approach makes it extremely easy to disco!er and attach control extenders to your controls. In +& @//A, you had to do this process manually, by wiring up control extenders. B. -ou can choose not to add the Extender. ,e will go ahead with option '. ,e will be adding two +alidationControls to the textbox. "he first, a Compare+alidator to check if the user does not enter an in!alid date BEg $ay C@D and second, a Eange+alidator to keep the date range as desired. 'dding Compare+alidator <asp:Co(pare@ali ator ID="Co(pare@ali atorB" runat="server" ControlTo@ali ate="TextBoxB" Displa.="D.na(i$" %rrorCessage="I nvali Date" 0perator="DataT.peChe$#" T.pe="Date"> </asp:Co(pare@ali ator> <$$B:@ali atorCallout%xten er ID="Co(pare@ali atorB<@ali atorCallout%xten er" runat="server" %nable ="True" TargetControlID="Co(pare@ali ato rB"> </$$B:@ali atorCallout%xten er> 'dding Eange+alidator F ,e will restrict the user to select a date range starting from today to .A days from now. <asp:'ange@ali ator ID="'ange@ali atorB" runat="server" ControlTo@ali ate="TextBoxB" %rrorCessage="'ange@ali ator" T.pe="Date"> </asp:'ange@ali ator> <$$B:@ali atorCallout%xten er ID="'ange@ali atorB<@ali atorCallout%xten er" runat="server" %nable ="True" TargetControlID="'ange@ali atorB "> </$$B:@ali atorCallout%xten er> In the code behind of your page, add this code CG prote$te voi &age<Joa 8ob,e$t sen er9 %vent6rgs e:

; 'ange@ali atorB+Cini(u(@alue = 1.ste(+DateTi(e+Gow+To1hortDate1tring8:? 'ange@ali atorB+Caxi(u(@alue = 1.ste(+DateTi(e+Gow+6 Da.s8BN:+To1hortDate1tring8:? A +B.HE" &rote$te 1ub &age<Joa 8B.@al sen er 6s 0b,e$t9 B.@al e 6s %vent6rgs: 'ange@ali atorB+Cini(u(@alue = 1.ste(+DateTi(e+Gow+To1hortDate1tring8: 'ange@ali atorB+Caxi(u(@alue = 1.ste(+DateTi(e+Gow+6 Da.s8BN:+To1hortDate1tring8: %n 1ub ,ell those were some tips associated with the CalendarExtender. 's future !ersions of the toolkit are released, we should be hopeful that there will exist easier ways, of achie!ing the functionality discussed in this article. I hope this article was useful and I thank you for !iewing it.