<%@ Page Language="C#" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
    <title>Another Popup Calendar</title>
    <script language="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 = (1 * top + 15) + "px";  // Convert to int, concat back with string.
          calendarObj.style.left = (1 * 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">
        protected string[] _hiddenPropertiesDelimiter;
        protected TextBox _tb;
        const int TARGETID = 0; // Index for this info within an array.
        const int TOP = 1;
        const int LEFT = 2 ;

        protected void Page_Load(object sender, EventArgs e)
        {
            _hiddenPropertiesDelimiter = new string[1] {"+"};
            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, StringSplitOptions.None);
                string targetID = hiddenTargetStringArray[TARGETID];
                _tb = (TextBox)Page.FindControl(targetID);
                DatePicker.Attributes.CssStyle["Top"] = hiddenTargetStringArray[TOP];
                DatePicker.Attributes.CssStyle["Left"] = hiddenTargetStringArray[LEFT];
                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>

        &nbsp;&nbsp;

        <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>