In this short article I will explain how to clear the selected date of AJAX CalendarExtender control in ASP.Net using JavaScript through Client Side scripting.
You might also like to read:
The HTML Markup consists of a TextBox with its associated ASP.Net AJAX CalendarExtender. There’s a Button to clear the Selected Date of AJAX Control Toolkit CalendarExtender control. For the Button I have specified a Client Side JavaScript function using the OnClientClick event handler.
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
<cc1:CalendarExtender ID="Calendar1" BehaviorID = "_Calendar1" runat="server" TargetControlID="txtDate">
</cc1:CalendarExtender>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Clear Selected Date" OnClientClick = "return ClearSelectedDate();" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function ClearSelectedDate() {
$find("_Calendar1").set_selectedDate(null);
$("[id*=Calendar1]").val("");
$(".ajax__calendar_active").removeClass("ajax__calendar_active");
return false;
}
</script>
Explanation:
When the Button is clicked, the ClearSelectedDate JavaScript function is executed. Inside this function, first the Calendar Instance is created using its BehaviorId and then Selected Date of the ASP.Net AJAX CalendarExtender is set to NULL using the set_selectedDate function and the TextBox is cleared.
The set_selectedDate is an inbuilt JavaScript function of the ASP.Net AJAX CalendarExtender
In spite of calling the set_selectedDate function the Selected Date remains visible in the ASP.Net AJAX CalendarExtender Calendar Popup, hence using jQuery I have removed the CSS class that highlights the selected date.
Demo
Downloads
