AJAX Control toolkit Calendar Control is an extender control that works with some input field to extend its functionality. It provides client side scripting functionality with customizable date format and User Interface.
You can select the date after opening extender by clicking on the date to set or Today link for populating Today's date. Hope you raise a question here about how we move back and forth to the months or years to select the required date.
You can move back and forth between months by clicking on the left and right arrow buttons, and by clicking on the Title of the calendar you can change the view from days to months and then another click to years to select the date. The same procedure reverses once you selected the required year from past or future year to months and then finally day selection.
So let’s start it to implement it in our code and check the initial look.
First we required a textbox where the extender appears.
- <asp:TextBox ID="Date1" runat="server"></asp:TextBox>
Then add Ajax control kit calendar control.
- <div class="row">
- <div id="ajaxcontroltoolkitplaceholder">
- <ajaxToolkit:CalendarExtender runat="server" TargetControlID="Date1" CssClass="ClassName" Format="MM/dd/yyyy" /> </div>
- </div>
Output
Properties
NOTE
Either startDate and endDate criteria will restrict the user to enter or select the date specified other than criteria. You can check that the dates other than those defined in the range are marked strikethrough and disabled, then user is unable to select them.
As I have not applied any theming option not css nor any style associated with it that’s why it is showing without style. To enable theme we will use the css file placed in the calendar demo folder with the name of calendar.css
And use the property CssClass=”classdefinedinthefile” like this CssClass="ajax__calendar"
Hope you find this useful, if you have any questions please comment in the comment section.