Ajax CalendarExtender Example In Asp.Net With Start End Date Range

Ajax CalendarExtender Example In Asp.Net With Start Date And End Date. This post explains how to use Calendar Extender control of AjaxControlToolkit with textbox to show calendar as popup when user clicks in the textbox or on the icon.

Place one textbox on the page and configure it as shown in following code to open popup when user clicks in textbox to pick a date.

We can change look and feel by applying CalendarExtender CSS Styles And Themes.

HTML SOURCE

---

<Ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>

Pick a date: 

<asp:TextBox ID="txtCal" runat="server"/>

<Ajax:CalendarExtender ID="CalendarExtender1" runat="server" 

                       TargetControlID="txtCal" SelectedDate="6/6/2012" 

                       StartDate="6/1/2012" EndDate="7/1/2012">

</Ajax:CalendarExtender>

SelectedDate property is used to display default date in textbox.

We can specify the date range to be shown by using StartDate and EndDate propeties. dates outside range are displayed as struck out.

If you want to show calendar when user clicks on the icon then use a image control and PopupButtonID property to popup.

To show only years we can use javascript in OnClientShown event of calander extender.

---

   1:  <script type="text/javascript">

   2:  function ShowYears(sender,args)

   3:  {

   4:     sender._switchMode("years", true);           

   5:  }

   6:  </script>

<asp:TextBox ID="txtCalendar" runat="server"/> 

<asp:Image ID="imgCal" runat="server" ImageUrl="~/Images/calendar.png"/>

<Ajax:CalendarExtender ID="CalendarExtender2" runat="server"

                       TargetControlID="txtCalendar" 

                       PopupButtonID="imgCal" 

                       OnClientShown="ShowYears"/>

Download Sample Code

Tweet

If you like this post than join us or share