Date Picker Control Using AjaxControlToolkit in a form (Comparing between 2 date picker )
I am using the normal AjaxControlToolkit & use 2 datepicker in my page.
First date picker is taking the date which doesn't ex id from Today Date(today or any previous date). On the 2nd text box I can selected the date in between the date taken in the 1st date picker to Today Date.
The Script code which i am using that works on the JQuery date picker. But it won't work in the normal Ajax date picker.
Here is the code As follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Date Picker</title>
<script type="text/C#" >
$(function () {
$("#txtfrom").datepicker({
onSelect: function (date) {
$("#txtto").datepicker({
minDate: date,
maxDate: new Date()
});
},
maxDate: 0
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<b>From</b>
<asp:TextBox ID="txtfrom" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="ceLoanTakenDate" runat="server" Format="dd/MM/yyyy" PopupButtonID="txtfrom" TargetControlID="txtfrom">
</cc1:CalendarExtender>
   
<b>To</b>
<asp:TextBox ID="txtto" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM/yyyy" PopupButtonID="txtto" TargetControlID="txtto">
</cc1:CalendarExtender>
</div>
</form>
</body>
</html>
Answer
You need to handle client-side DateSelectionChanged event of the first extender and set up startDate property of the second extender:
<b>From</b>
<asp:TextBox ID="txtfrom" runat="server"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="ceLoanTakenDate" runat="server" Format="dd/MM/yyyy"
PopupButtonID="txtfrom" TargetControlID="txtfrom"
OnClientDateSelectionChanged="ceLoanTakenDate_dateSelectionChanged">
</ajaxToolkit:CalendarExtender>
<b>To</b>
<asp:TextBox ID="txtto" runat="server"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM/yyyy" PopupButtonID="txtto"
TargetControlID="txtto">
</ajaxToolkit:CalendarExtender>
<script type="text/javascript">
function ceLoanTakenDate_dateSelectionChanged(sender, args) {
$find("<%= CalendarExtender1.ClientID %>").set_startDate(sender.get_selectedDate());
}
</script>