Post
Ask Question

AjaxCalendarExtender in ASP.NET

AjaxCalendarExtender

AjaxCalendar is an ASP.NET AJAX extender that can be attached to any ASP:TextBox control to provide client-side date-picking functionality with customizable date-format and provide an UI in a popup control. You can interact with these calendar by selecting on a day to set the date, or ‘Today’ link to set the current date.

Some important properties of AjaxCalendarExtender:

  1. TargetControlID: The ASP:TextBox control ID where want to show calendar when user click on TextBox.

  2. DefaultView: Default view of the calendar when it first popup (Days, Months or Years).

  3. PopupPosition: It indicate where you want the calendar displayed (bottom, left, top or right).

  4. StartDate: Minimum date that user can select.

  5. EndDate: Maximum date that user can select.

  6. SelectedDate: Date to be initially filled in TextBox.

Aspx Page coding:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  12.     </asp:ToolkitScriptManager>  
  13.     <div>  
  14.         <asp:CalendarExtender ID="CalendarExtender1" runat="server"   
  15.             TargetControlID="txtDate" PopupPosition="Right" EndDate="8/10/2015"   
  16.             StartDate="2012-03-03" TodaysDateFormat="d MMMM, yyyy"   
  17.             SelectedDate="8/10/2015">  
  18.         </asp:CalendarExtender>  
  19.         <asp:TextBox runat="server" ReadOnly="true" ID="txtDate">  
  20.         </asp:TextBox>  
  21.     </div>  
  22.     </form>  
  23. </body>  
  24. </html>  
Output

Calendar

Note: You need to use the Ajax Control Toolkit library.

 
Next Recommended Reading New Features in ASP.NET 2015 or ASP.NET 5