ASP.NET 2.0 和 AJAX Control Toolkit 中的日期选择器

• 下载源代码 - 4.5 KB

引言

在本文中，我们将看到如何将 AJAX 技术添加到 Web 用户控件，并从日历控件获取日期。 我看过许多关于日期时间选择器控件的文章，但我没有找到一个能够通过下拉菜单选择月份和年份的控件。 我找到的那些控件中，大多数是付费的。 我的客户需要类似的功能，但要免费。 此外，一些选项不提供可为空日期的属性。 在这里，我引入了“清除日期”和一个名为 Nullable 的属性。

创建一个新的 AJAX 启用的 Web 项目

添加一个新的名为“DateTimePicker”或任何其他您想要的 Web 用户控件。 在 Web 控件的 HTML 中，添加以下代码，以便您的控件在设计模式下看起来像下图。

HTML

<!-- HTML Code -->

Date:<asp:TextBox ID="DateTextBox" runat="server" 
    Width="150" autocomplete="off" /> 
<br /> 
<asp:Panel ID="Panel1" runat="server" CssClass="popupControl" 
    BorderStyle="solid" BackColor="AliceBlue" BorderColor="darkblue" 
    BorderWidth="1"> 
    <asp:UpdatePanel runat="server" ID="up1"> 
        <ContentTemplate> 
        <center> 
            <asp:DropDownList ID="ddlMonth" runat="server" 
                OnSelectedIndexChanged="ddlMonth_SelectedIndexChanged" 
                AutoPostBack="true" Width="90"> 
                <asp:ListItem Value="1">January</asp:ListItem> 
                <asp:ListItem Value="2">February</asp:ListItem> 
                <asp:ListItem Value="3">March</asp:ListItem> 
                <asp:ListItem Value="4">April</asp:ListItem> 
                <asp:ListItem Value="5">May</asp:ListItem> 
                <asp:ListItem Value="6">June</asp:ListItem> 
                <asp:ListItem Value="7">July</asp:ListItem> 
                <asp:ListItem Value="8">August</asp:ListItem> 
                <asp:ListItem Value="9">September</asp:ListItem> 
                <asp:ListItem Value="10">October</asp:ListItem> 
                <asp:ListItem Value="11">November</asp:ListItem> 
                <asp:ListItem Value="12">December</asp:ListItem> 
            </asp:DropDownList> 
            <asp:DropDownList ID="ddlYear" runat="server" 
                OnSelectedIndexChanged="ddlYear_SelectedIndexChanged" 
                AutoPostBack="True" Width="60"> 
            </asp:DropDownList> 
            
            <asp:Calendar ID="Calendar1" runat="server" Width="150px" 
                DayNameFormat="Shortest" BackColor="White" 
                BorderColor="#3366CC" CellPadding="0" Font-Names="Verdana" 
                Font-Size="8pt" ForeColor="#003399" 
                OnSelectionChanged="Calendar1_SelectionChanged" 
                ShowNextPrevMonth="False" ShowTitle="False" BorderWidth="1px"
                FirstDayOfWeek="Sunday" Height="150px" 
                SelectedDate="2007-08-08"> 
                <SelectedDayStyle BackColor="#009999" Font-Bold="True" 
                    ForeColor="#CCFF99" /> 
                <TodayDayStyle BackColor="#99CCCC" ForeColor="White" /> 
                <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" /> 
                <WeekendDayStyle BackColor="#CCCCFF" /> 
                <OtherMonthDayStyle ForeColor="#999999" /> 
                <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" /> 
                <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" 
                    Height="1px" /> 
                <TitleStyle BackColor="#003399" Font-Size="10pt" 
                    BorderColor="#3366CC" Font-Bold="True" BorderWidth="1px" 
                    ForeColor="#CCCCFF" Height="25px" /> 
            </asp:Calendar> 
            <asp:LinkButton ID="lbtnToday" runat="server" Text=":: Today">
                </asp:LinkButton>    
            <asp:LinkButton ID="lbtnClearDate" runat="server" 
                Text="::Clear Date"></asp:LinkButton> 
        </center> 
        </ContentTemplate> 
    </asp:UpdatePanel> 
</asp:Panel> 
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" 
    TargetControlID="DateTextBox" PopupControlID="Panel1" Position="Bottom" />

<!-- HTML Code End -->

源代码

'Your Source code in code behind of the web user control look like this

Partial Class DateTimePicker
    Inherits System.Web.UI.UserControl

#Region "Private and Default values"
    Private mCulture As String = "en-GB"
    Private mSelectedDateFormat As String = "dd/MM/yyyy"
    Private mYearMinimum As Integer = 1970
    Private mYearMaximum As Integer = 2029
    Private mNullable As Boolean = True

#End Region

#Region "Public Properties"

    Public Property Nullable() As Boolean
        Get
            Return mNullable
        End Get
        Set(ByVal value As Boolean)
            mNullable = value
        End Set
    End Property

    Public Property Culture() As String
        Get
            Return mCulture
        End Get
        Set(ByVal value As String)
            mCulture = value
        End Set
    End Property

    Public Property SelectedDateFormat() As String
        Get
            Return mSelectedDateFormat
        End Get
        Set(ByVal value As String)
            mSelectedDateFormat = value
        End Set
    End Property

    Public WriteOnly Property YearMinimum() As Integer
        Set(ByVal value As Integer)
            mYearMinimum = value
        End Set
    End Property

    Public WriteOnly Property YearMaximum() As Integer
        Set(ByVal value As Integer)
            mYearMaximum = value
        End Set
    End Property

    Public Property SelectedDate() As DateTime
        Get
            If DateTextBox.Text <> "" Then
                Return DateTime.Parse(DateTextBox.Text, _
                    New System.Globalization.CultureInfo(mCulture))
            Else
                Return Nothing
            End If
        End Get
        Set(ByVal value As DateTime)
            DateTextBox.Text = value.ToString(mSelectedDateFormat, _
                New System.Globalization.CultureInfo(mCulture))
        End Set
    End Property

#End Region

#Region "private and protected methods"

    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _
        ByVal e As EventArgs)
        'Popup result is the selected date
        PopupControlExtender1.Commit(Calendar1.SelectedDate.ToString(_
            mSelectedDateFormat, _
            New System.Globalization.CultureInfo(mCulture)))
    End Sub

    Private Sub SelectCalendar()
        If ddlYear.SelectedValue <> "" Then
            Calendar1.VisibleDate = 
               DateTime.Parse(ddlMonth.SelectedValue & "/" & _
               Day(DateTime.Now()) & "/" & ddlYear.SelectedValue)
        End If

    End Sub

    Protected Sub ddlMonth_SelectedIndexChanged(ByVal sender As Object, _
        ByVal e As System.EventArgs)
        SelectCalendar()
    End Sub

    Protected Sub ddlYear_SelectedIndexChanged(ByVal sender As Object, _
        ByVal e As System.EventArgs)
        SelectCalendar()
    End Sub

    Protected Sub Page_Init(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Init
        If Not IsPostBack Then
            Dim mIndex As Integer
            For mIndex = mYearMinimum To mYearMaximum
                ddlYear.Items.Add(New ListItem(mIndex.ToString(), _
                mIndex.ToString()))
            Next
            ddlYear.SelectedValue = Year(DateTime.Now())
            ddlMonth.SelectedValue = Month(DateTime.Now())
            lbtnClearDate.Visible = mNullable
        End If
    End Sub

    Protected Sub lbtnClearDate_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles lbtnClearDate.Click
        DateTextBox.Text = ""
        PopupControlExtender1.Commit("")
    End Sub

    Protected Sub lbtnToday_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles lbtnToday.Click
        ddlYear.SelectedValue = Year(DateTime.Now())
        ddlMonth.SelectedValue = Month(DateTime.Now())
        SelectCalendar()
        Calendar1.SelectedDate = DateTime.Now()
        PopupControlExtender1.Commit(Calendar1.SelectedDate.ToString(_
            mSelectedDateFormat, _
            New System.Globalization.CultureInfo(mCulture)))
    End Sub

#End Region
End Class

记住：

请检查您是否已从官方 网站 安装了 AJAX Extensions 和 AJAX Control Toolkit。

历史

• 2007年8月13日 -- 发布原始版本