Choosing Dates with a Calendar

Choosing Dates with a Calendar

The ASP.NET AJAX Control Toolkit provides a Calendar control that allows users to easily select a date from a pop-up calendar. The Calendar control can be easily integrated with a text box control to provide a complete date picker functionality.

To use the Calendar control, follow these steps:

Add the ASP.NET AJAX Control Toolkit to your project if you haven’t already. You can download the latest version from the official website.

Add a reference to the toolkit in your ASP.NET page or user control by adding the following code to the <head> section of the page:

<script src=”~/Scripts/jquery-3.6.0.min.js”></script>

<script src=”~/Scripts/jquery-ui.min.js”></script>

<link href=”~/Content/themes/base/jquery-ui.min.css” rel=”stylesheet” />

<link href=”~/Content/themes/base/jquery-ui.theme.min.css” rel=”stylesheet” />

<script src=”~/Scripts/jquery-ui-timepicker-addon.min.js”></script>

<link href=”~/Content/themes/base/jquery-ui-timepicker-addon.min.css” rel=”stylesheet” />

This code includes the necessary JavaScript and CSS files for the jQuery UI and the timepicker addon, which is an extension to jQuery UI that provides support for time selection.

Add a text box control to the page:

<asp:TextBox ID=”txtDate” runat=”server”></asp:TextBox>

Add a CalendarExtender control to the page and configure it to use the text box control:

<asp:CalendarExtender ID=”calDate” runat=”server” TargetControlID=”txtDate” PopupButtonID=”btnDate” Format=”yyyy-MM-dd”></asp:CalendarExtender>

This code adds a CalendarExtender control that is associated with the text box control and a button control with an ID of btnDate. The Format property is set to specify the date format to be used.

Add a button control to the page that will be used to trigger the display of the calendar:

<asp:ImageButton ID=”btnDate” runat=”server” ImageUrl=”~/images/calendar.gif” />

This code adds a button control that displays an image of a calendar. When the user clicks on the button, the calendar is displayed. With these steps, you should now have a fully functional date picker control on your ASP.NET page.

Apply for ASP.NET Certification Now!!

https://www.vskills.in/certification/certified-aspnet-programmer

Back to Tutorial

Get industry recognized certification – Contact us

Menu