PopUpCalendar.aspx

<%@ Page Language="VB" %>
<script runat="server">  
' Insert page code here    '
</script>
<html>
<head> 
<script language="Javascript"> 
function GetDate(CtrlName)   
{   
ChildWindow = window.open('Calendar.aspx?FormName=' + document.forms[0].name + '&CtrlName=' + CtrlName, "PopUpCalendar", "width=370,height=290,top=200,left=200,toolbars=no,scrollbars=no,status=no,resizable=no");    } 
</script>
</head>
<body>
<form runat="server"> 
Start Date:         
<asp:TextBox id="txtStartDate" runat="server">
</asp:TextBox>    
<a href="javascript:GetDate('txtStartDate')">
<img alt="PopUp Calendar" src="SmallCalendar.gif" border="0"/>
</a>
<br/>      
End &nbsp;Date:
<asp:TextBox id="txtEndDate" runat="server">
</asp:TextBox>  
<a href="javascript:GetDate('txtEndDate')">
<img alt="PopUp Calendar" src="SmallCalendar.gif" border="0"/>
</a>
</form>
</body></html>

Calendar.aspx

<%@ Page Language="VB" autoeventwireup="True" Debug="true"%>
<script runat="server">
    Public strFormName As String
    Public strCtrlName As String
    Public strSelectedDate As String
    Sub Page_Load(sender As Object, e As EventArgs)
        myCalendar.ShowTitle = False
        If Not Page.IsPostBack Then
            myCalendar.SelectedDate = System.DateTime.Now()
            Call Populate_MonthList()
            Call Populate_YearList()
        End If
        strSelectedDate = myCalendar.SelectedDate.ToString("dd/MM/yyyy")
        strFormName = Request.QueryString("FormName")
        strCtrlName = Request.QueryString("CtrlName")
    End Sub
    
    Sub Set_Calendar(Sender As Object, E As EventArgs)
        'Whenever month or year selection changes display the calendar for that month/year        
        myCalendar.TodaysDate = CDate(drpCalMonth.SelectedItem.Value & " 1, " & drpCalYear.SelectedItem.Value)
    End Sub
    
    Sub Populate_MonthList()
        drpCalMonth.Items.Add("一月")
        drpCalMonth.Items.Add("二月")
        drpCalMonth.Items.Add("三月")
        drpCalMonth.Items.Add("四月")
        drpCalMonth.Items.Add("五月")
        drpCalMonth.Items.Add("六月")
        drpCalMonth.Items.Add("七月")
        drpCalMonth.Items.Add("八月")
        drpCalMonth.Items.Add("九月")
        drpCalMonth.Items.Add("十月")
        drpCalMonth.Items.Add("十一月")
        drpCalMonth.Items.Add("十二月")    
        drpCalMonth.Items.FindByValue(MonthName(DateTime.Now.Month)).Selected = True
    End Sub
    
    Sub Populate_YearList()
        'Year list can be extended
        Dim intYear As Integer
        For intYear = DateTime.Now.Year - 20 to DateTime.Now.Year + 20
            drpCalYear.Items.Add(intYear)
        Next
        drpCalYear.Items.FindByValue(DateTime.Now.Year).Selected = True
    End Sub

    Sub myCalendar_SelectionChanged(sender As Object, e As EventArgs)
        strSelectedDate = myCalendar.SelectedDate.ToString("dd/MM/yyyy")
    End Sub
</script>

<script language="Javascript">
    function ReturnDate()
        {
         window.opener.document.forms["<%= strFormName %>"].elements["<%= strCtrlName %>"].value = "<%= strSelectedDate %>";
         window.close();
        }
        
    function Close()
        {
            window.close();
        }
</script>

<style type="text/css">
    BODY { font-family: verdana, arial, helvetica;
    }
    .calTitle   {font-weight: bold;
                 font-size: 11;
                 background-color:#FFCC66;
                 color: black;
                 width: 90px;
    }
    .calBody    {font-size: 11;
                 border-width: 10px;
    }
</style>

<form id="frmCal" runat="server">
    <table cellspacing="0" cellpadding="0" width="350" border="0">
        <tbody>
            <tr>
                <td align="left" bgcolor="#FFCC66">
                    <asp:DropDownList id="drpCalMonth" Runat="Server" AutoPostBack="True" OnSelectedIndexChanged="Set_Calendar" cssClass="calTitle"></asp:DropDownList>
                </td>
                <td align="right" bgcolor="#FFCC66">
                    <asp:DropDownList id="drpCalYear" Runat="Server" AutoPostBack="True" OnSelectedIndexChanged="Set_Calendar" cssClass="calTitle"></asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td colspan="2">
      <asp:Calendar id="myCalendar" 
                    runat="server" 
                    BorderWidth="1px" 
                    BackColor="#FFFFCC" 
                    Width="350" 
                    DayNameFormat="Full" 
                    NextMonthText="Next &gt;"
                    PrevMonthText="&lt; Prev"
                    ForeColor="#663399" 
                    Height="200px" 
                    Font-Size="8pt" 
                    Font-Names="Verdana" 
                    BorderColor="#FFCC66" 
                    ShowGridLines="True" 
                    OnSelectionChanged="myCalendar_SelectionChanged">
                        <SelectorStyle backcolor="#FFCC66"></SelectorStyle>
                        <NextPrevStyle font-size="9pt" forecolor="#FFFFCC"></NextPrevStyle>          
                        <DayHeaderStyle height="1px" 
                         backcolor="#FFCC66"></DayHeaderStyle>
                        <SelectedDayStyle font-bold="True" backcolor="#CCCCFF"></SelectedDayStyle>
                        <TitleStyle font-size="9pt" font-bold="True" forecolor="#FFFFCC" backcolor="#990000"></TitleStyle>
                        <OtherMonthDayStyle forecolor="#CC9966"></OtherMonthDayStyle>
        </asp:Calendar>
                </td>
            </tr>
         </tbody>
    </table>
            
    <table cellspacing="0" cellpadding="0" width="350" border="0">
          <tbody>
          <tr><td>&nbsp;</td></tr>
            <tr>
                <td align="center">
                    <input id="btnReturnDate" onclick="Javascript:ReturnDate()" type="button" value="Select" runat="Server" />&nbsp; 
                    <input id="btnCloseWindow" onclick="Javascript:Close()" type="button" value="Close" runat="Server" />
                </td>
            </tr>
        </tbody>
    </table>
</form>