In this article I will explain with an example, how to clear selected date of
AJAX CalendarExtender control using
JavaScript in ASP.Net with C# and VB.Net.
Installing AjaxControlToolkit package using Nuget
HTML Markup
The HTML Markup consists of following controls:
ScriptManager – For enabling ASP.Net
AJAX.
TextBox – For capturing the user input.
CalendarExtender – For capturing date.
The
AJAX CalendarExtender has been set assigned with the following properties:
TargetControlID – The control where the Text will be displayed.
BehaviorID – For specifying the Extender control.
Button – For clearing the selected date.
The
Button has been assigned with a
JavaScript OnClientClick event handler.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true" />
<ajaxToolkit:CalendarExtender ID="Calender1" runat="server" TargetControlID="txtDate" BehaviorID="_Calendar1" />
<asp:Button ID="btnClear" runat="server" Text="Clear Selected Date" OnClientClick="return ClearSelectedDate();" />
Clearing Selected Date of AJAX CalendarExtender using JavaScript
Inside the HTML Markup, the following script file is inherited.
1. jquery.min.js
ClearSelectedDate
When the
Clear Selected Date Button is clicked, the
ClearSelectedDate JavaScript function is called.
Inside the
ClearSelectedDate JavaScript function, the selected date of the ASP.Net
AJAX CalendarExtender is set to NULL using the
set_selectedDate function which cleared the TextBox.
The TextBox can be cleared using val function with accepting empty string as a parameter.
Both of the above ways are used to clear the TextBox but selected date will remain visible in the ASP.Net
AJAX CalendarExtender Popup hence, the CSS class that highlights the selected date is removed using
jQuery.
Finally, the FALSE is returned.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
function ClearSelectedDate() {
$find("_Calendar1").set_selectedDate(null);
$("[id*= txtDate]").val("");
$(".ajax__calendar_active").removeClass("ajax__calendar_active");
return false;
}
</script>
Screenshot
![Clear Selected Date of ASP.Net AJAX CalendarExtender using JavaScript]()
Demo
Downloads
