Help complete calendar control code

.NET
1

Hi guys,

I have an asp.net calendar control that should an input and a calendar control. when the user selects the calendar button, it shows a calendar control, but if i select a date, the date selected should get populated on the input. I found a calendar which only partially work. It opens up but doesnt pass the selected date to the calendar control. also it doesnt move the forward or backward when the next or previous months link is pressed.
It seems it has something missing. Anyone can help complete the missing bit please?

The best way to see the effect is to compile it and run the code below:


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 
    Inherits="_Default" %>
<!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 id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        function ToggleCalendar()
        {
            var pnlCalendar = self.document.getElementById('pnlCalendar');
            if (pnlCalendar.style.display == 'none')
            {
                ShowHideCalendar(true);
            }
            else
            {
                ShowHideCalendar(false);
            }
        }
        function ShowHideCalendar(CanShow)
        {
            var pnlCalendar = self.document.getElementById('pnlCalendar');
            if (CanShow==true)
            {
                pnlCalendar.style.display = "block";
                var t = setTimeout("ShowHideCalendar(false)", 5000);
            }
            else
            {
                pnlCalendar.style.display = "none";
            }
        
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox runat="server" ID="txtDate" 
        onfocus="ShowHideCalendar(true)"></asp:TextBox>
        
        <button onclick="ToggleCalendar()">...
        </button>
        <div id="pnlCalendar" style="display:none">
            <asp:Calendar runat="server" ID="clrDate"     >
             <DayHeaderStyle Font-Size="X-Small" />
                <DayStyle Font-Size="X-Small" />
                <OtherMonthDayStyle ForeColor="GrayText" />
                <TitleStyle Font-Size="X-Small"  Font-Bold="true" 
                    BackColor="Silver" />
            </asp:Calendar>
        </div>
    </div>
    </form>
</body>
</html>

Thanks in advance

2

Have you considered using ajax extender?

3

Yes but my host does not support ajax

4

Try searching the net for jquery calendar. jQuery will make your life very easy.

5

If all you are looking for is a simple date picker to populate a textbox, i would recommend jQuery as well. Add jQuery to your project and something like the jQuery Date Input and you are good to go.