<%@ Page Language="C#" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
    
<title>Another Popup Calendar</title>
    
<script type="text/javascript">
    
function DisplayCalendar(obj, calendarID, target) {
       
var calendarObj = document.getElementById(calendarID);
       var 
hiddenCalendarPropertiesObj = document.getElementById("hiddenCalendarProperties");
       var 
top obj.style.top.replace("px""");
       var 
left obj.style.left.replace("px""");
       if
(calendarObj != null && hiddenCalendarPropertiesObj != null)
       {
          calendarObj.style.top 
(* top + 15) + "px";  // Convert to int, concat back with string.
          
calendarObj.style.left (* left + 15) + "px";
          
calendarObj.style.visibility "visible";
          
hiddenCalendarPropertiesObj.value = target + "+" + calendarObj.style.top + "+" + calendarObj.style.left;
       
}
    }

    
function HideCalendar(calendarID) {
       
var calendarObj = document.getElementById(calendarID);
       if
(calendarObj != null)
          {calendarObj.style.visibility 
"hidden";}
    }
    
</script>

    
<script language="C#" runat="server">
        
string delimStr;                   // Here
        
char[] _hiddenPropertiesDelimiter// Here
        

        
protected TextBox _tb;
        const int 
TARGETID 0// Index for this info within an array.
        
const int TOP 1;
        const int 
LEFT ;

        protected void 
Page_Load(object sender, EventArgs e)
        {
            delimStr 
"+";                                      // Here
            
_hiddenPropertiesDelimiter delimStr.ToCharArray()// Here
            
            
if (!Page.IsPostBack)
            {
                DatePicker.Attributes.CssStyle[
"visibility""hidden";
            
}
        }

        
protected void DatePicker_SelectionChanged(object sender, System.EventArgs e)
        {
            ResetCalendarProperties(
"hidden");
            if 
(_tb != null)
              {
                  _tb.Text 
DatePicker.SelectedDate.ToShortDateString();
              
}
        }

        
protected void DatePicker_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
        {
            ResetCalendarProperties(
"visible");
        
}


        
protected void ResetCalendarProperties(string hideFlag)
        {
            HtmlInputHidden hiddenCalendarProperties 
(HtmlInputHidden)Page.FindControl("hiddenCalendarProperties");
            if 
(hiddenCalendarProperties != null)
            {
                
string[] hiddenTargetStringArray 
                    
hiddenCalendarProperties.Value.Split(_hiddenPropertiesDelimiter)// Here
                
                
string targetID hiddenTargetStringArray[TARGETID].ToString();
                
_tb (TextBox)Page.FindControl(targetID);
                
DatePicker.Attributes.CssStyle["Top"hiddenTargetStringArray[TOP].ToString();
                
DatePicker.Attributes.CssStyle["Left"hiddenTargetStringArray[LEFT].ToString();
                
DatePicker.Attributes.CssStyle["visibility"hideFlag;
                
            
}
        }
    
</script>

</head>
<body>
    
<form id="Form1" method="post" runat="server">
        
<asp:Calendar ID="DatePicker" Style="z-index: 999; left: 340px; position: absolute;
            top: 133px"
 runat="server" OnSelectionChanged="DatePicker_SelectionChanged" BackColor="White"
            BorderColor
="#999999" CellPadding="4" DayNameFormat="Short" Font-Names="Verdana"
            Font-Size
="8pt" ForeColor="Black" Height="180px" Width="200px" OnVisibleMonthChanged="DatePicker_VisibleMonthChanged">
            
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
            <
TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
            <
SelectorStyle BackColor="#CCCCCC" />
            <
WeekendDayStyle BackColor="#FFFFCC" />
            <
OtherMonthDayStyle ForeColor="#808080" />
            <
NextPrevStyle VerticalAlign="Bottom" />
            <
DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
            <
TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
        </
asp:Calendar>

        
<asp:Label ID="Label17" Style="z-index: 101; left: 47px; position: absolute; top: 53px"
            runat
="server" Font-Size="X-Small" Font-Names="Arial">From: </asp:Label>

        
<asp:TextBox ID="txtFromDate" Style="z-index: 102; left: 85px; position: absolute;
            top: 53px"
 runat="server" Width="112px" onblur="HideCalendar('DatePicker')" />

        <
asp:Label ID="Label1" Style="z-index: 103; left: 47px; position: absolute; top: 83px"
            runat
="server" Font-Size="X-Small" Font-Names="Arial">To: </asp:Label>

        
<asp:TextBox ID="txtToDate" Style="z-index: 104; left: 85px; position: absolute;
            top: 83px"
 runat="server" Width="112px" />

        <
input id="buttonShowCalendar1" style="z-index: 108; left: 202px; position: absolute;
            top: 52px"
 type="button" value="..." language="javascript" onclick="DisplayCalendar(this, 'DatePicker', 'txtFromDate')" />

        <
input id="buttonShowCalendar2" language="javascript" style="z-index: 111; left: 203px;
            position: absolute; top: 83px"
 onclick="DisplayCalendar(this, 'DatePicker', 'txtToDate')"
            type
="button" value="..." />

        <
asp:CompareValidator Style="z-index: 105; left: 231px; position: absolute; top: 55px"
            ControlToValidate
="txtFromDate" Display="Dynamic" ErrorMessage="Date?" ID="CompareValidator1"
            Operator
="DataTypeCheck" runat="server" Type="Date">Date?</asp:CompareValidator>

        
<asp:CompareValidator Style="z-index: 106; left: 233px; position: absolute; top: 88px"
            ControlToValidate
="txtToDate" Display="Dynamic" ErrorMessage="Date?" ID="CompareValidator2"
            Operator
="DataTypeCheck" runat="server" Type="Date">Date?</asp:CompareValidator>

          

        
<asp:Button Style="z-index: 107; left: 88px; position: absolute; top: 119px" ID="Button1"
            runat
="server" Text="Button" />

        <
input id="hiddenCalendarProperties" type="hidden" value="" runat="server" style="z-index: 110;
            left: 412px; position: absolute; top: 31px"
 />
    </
form>
    
</body>
    
</html>
    

Colorized by: CarlosAg.CodeColorizer