1//C# Code
2   protected void clrExpDate_SelectionChanged(object sender, EventArgs e)
3        {
4            Calendar clr = sender as Calendar;
5            this.tbExpDate.Text = clr.SelectedDate.ToShortDateString();
6            clr.TodaysDate = clr.SelectedDate;
7        }
8
9 protected void tbDate_TextChanged(object sender, EventArgs e)
10    {
11        string s = this.tbDate.Text;
12        try
13        {
14            this.clrDate.TodaysDate = Convert.ToDateTime(((TextBox)sender).Text);
15            this.clrDate.SelectedDate = this.clrDate.TodaysDate;
16            _updateMeals();
17        }
18        catch
19        {
20            this.lblDataErrMsg.Text = "Date format not valid!";
21        }
22    } 
23
24 protected override void OnPreRender(EventArgs e)
25    {
26        base.OnPreRender(e);
27        this.imgDate.Attributes.Add("onclick", "var pnl = document.getElementById('" + this.divCalendar.ClientID + "'); if(pnl){if(pnl.style.display == 'none'){pnl.style.display = 'inline';} else{pnl.style.display = 'none';}} return false;");
28        this.lnkCalendarClose.Attributes.Add("onclick", "var pnl = document.getElementById('" + this.divCalendar.ClientID + "'); pnl.style.display = 'none'; return false;"); 
29}
30
31//Html Code
32
33<table>
34                                        <tr>                                           
35                                            <td>
36                                                <anthem:TextBox ID="tbExpDate" runat="server" Height="20px" Width="150px" MaxLength="10" Font-Size="Large" AutoCallBack="true" OnTextChanged="tbExpDate_TextChanged" AutoUpdateAfterCallBack="true"></anthem:TextBox><br />
37                                                 <label  style="color:DarkGray; font-size:9px;font-weight:bold;">(Click icon to toggle the calendar)</label> 
38                                            </td>
39                                            <td valign="top"><asp:ImageButton ID="imgDate" runat="server" Height="28px" ImageUrl="../../../Themes/default/images/Common/calendar.gif" />
40                                           
41                                            </td>
42                                        </tr>
43                                    </table>
44                                    <div id="divCalendar" runat="server" style="z-index:0; display:none;">
45                                        <table>
46                                            <tr>
47                                                <td>
48                                                 <anthem:Calendar ID="clrExpDate" runat="server" style="position: absolute" OnSelectionChanged="clrExpDate_SelectionChanged" AutoUpdateAfterCallBack="True" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" ShowGridLines="True" UpdateAfterCallBack="True" Width="200px">
49                                                    <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
50                                                    <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
51                                                    <SelectorStyle BackColor="#FFCC66" />
52                                                    <OtherMonthDayStyle ForeColor="#CC9966" />
53                                                    <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
54                                                    <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
55                                                    <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
56                                                </anthem:Calendar>
57                                                </td> 
58                                                <td style="vertical-align:top; position:absolute; padding-left:193px; padding-top:0px" align="right">
59                                                   <asp:LinkButton ID="lnkCalendarClose" runat="server" ToolTip="Close" Font-Bold="true" Font-Size="11px" Text="x" ForeColor="Yellow" style="text-decoration:none;"/>
60                                                </td>
61                                            </tr>
62                                        </table>
63                                       
64                                    </div>