如何在ASP.NET VB中实现简易DateTimePicker？ASP.NET新手求助

嘿，作为ASP.NET VB的新手，DateTimePicker确实是开发中很常用的需求，我来给你拆解两种实现方式——一种是结合前端组件的标准方案，另一种是纯服务器端的简易版，帮你快速上手～

ASP.NET WebForms本身没有原生的DateTimePicker服务器控件，但我们可以用TextBox服务器控件配合jQuery UI的DateTimePicker插件来实现，体验更友好。

前端ASPX页面代码 #

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DateTimePicker Demo</title>
    <!-- 引入jQuery UI的样式和脚本 -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
        $(function () {
            // 初始化日期时间选择器，支持日期+时间选择
            $("#<%= txtDateTime.ClientID %>").datetimepicker({
                dateFormat: "yy-mm-dd", // 日期格式
                timeFormat: "HH:mm:ss", // 时间格式
                showButtonPanel: true // 显示确认面板
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="txtDateTime" runat="server"></asp:TextBox>
            <asp:Button ID="btnSubmit" runat="server" Text="提交选择" OnClick="btnSubmit_Click" />
            <asp:Label ID="lblResult" runat="server" Text="" Style="margin-left:10px;"></asp:Label>
        </div>
    </form>
</body>
</html>

注意：因为ASP.NET WebForms会自动修改服务器控件的客户端ID，所以初始化jQuery插件时一定要用<%= txtDateTime.ClientID %>来获取正确的客户端元素ID，不然会找不到控件哦～

后台VB代码（处理提交逻辑） #

Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)
    Dim selectedDateTime As DateTime
    ' 尝试解析用户输入的日期时间
    If DateTime.TryParse(txtDateTime.Text, selectedDateTime) Then
        lblResult.Text = $"你选择的日期时间是：{selectedDateTime.ToString("yyyy-MM-dd HH:mm:ss")}"
    Else
        lblResult.Text = "请选择有效的日期时间"
    End If
End Sub

如果不想依赖前端框架，也可以自己用DropDownList控件搭建一个简易的日期时间选择器，完全靠服务器端逻辑生成选项，适合轻量级场景。

前端ASPX页面代码 #

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="SimpleDateTime.aspx.vb" Inherits="SimpleDateTime" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>简易DateTimePicker</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="ddlYear" runat="server" AutoPostBack="True"></asp:DropDownList>年
            <asp:DropDownList ID="ddlMonth" runat="server" AutoPostBack="True"></asp:DropDownList>月
            <asp:DropDownList ID="ddlDay" runat="server"></asp:DropDownList>日
            <asp:DropDownList ID="ddlHour" runat="server"></asp:DropDownList>时
            <asp:DropDownList ID="ddlMinute" runat="server"></asp:DropDownList>分
            <asp:Button ID="btnSubmit" runat="server" Text="确认选择" OnClick="btnSubmit_Click" Style="margin-left:10px;" />
            <asp:Label ID="lblResult" runat="server" Text="" ForeColor="Green"></asp:Label>
        </div>
    </form>
</body>
</html>

后台VB代码（绑定选项+处理提交） #

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        ' 绑定年份（最近10年到未来10年）
        For year As Integer = DateTime.Now.Year - 10 To DateTime.Now.Year + 10
            ddlYear.Items.Add(New ListItem(year.ToString(), year.ToString()))
        Next
        ddlYear.SelectedValue = DateTime.Now.Year.ToString()

        ' 绑定月份
        For month As Integer = 1 To 12
            ddlMonth.Items.Add(New ListItem(month.ToString(), month.ToString()))
        Next
        ddlMonth.SelectedValue = DateTime.Now.Month.ToString()

        ' 绑定日期（根据年月自动调整天数）
        BindDays()

        ' 绑定小时（0-23时）
        For hour As Integer = 0 To 23
            ddlHour.Items.Add(New ListItem(hour.ToString("D2"), hour.ToString()))
        Next
        ddlHour.SelectedValue = DateTime.Now.Hour.ToString()

        ' 绑定分钟（每5分钟一档，可改成1分钟间隔）
        For minute As Integer = 0 To 59 Step 5
            ddlMinute.Items.Add(New ListItem(minute.ToString("D2"), minute.ToString()))
        Next
        ddlMinute.SelectedValue = DateTime.Now.Minute.ToString()
    End If
End Sub

' 根据选中的年份和月份，动态绑定日期选项
Private Sub BindDays()
    ddlDay.Items.Clear()
    Dim year As Integer = Integer.Parse(ddlYear.SelectedValue)
    Dim month As Integer = Integer.Parse(ddlMonth.SelectedValue)
    Dim daysInMonth As Integer = DateTime.DaysInMonth(year, month)
    
    For day As Integer = 1 To daysInMonth
        ddlDay.Items.Add(New ListItem(day.ToString(), day.ToString()))
    Next
    
    ' 默认选中当天（如果当前年月有效）
    If daysInMonth >= DateTime.Now.Day AndAlso month = DateTime.Now.Month AndAlso year = DateTime.Now.Year Then
        ddlDay.SelectedValue = DateTime.Now.Day.ToString()
    Else
        ddlDay.SelectedValue = daysInMonth.ToString()
    End If
End Sub

' 年份或月份改变时，重新绑定日期
Protected Sub ddlYear_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlYear.SelectedIndexChanged
    BindDays()
End Sub

Protected Sub ddlMonth_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlMonth.SelectedIndexChanged
    BindDays()
End Sub

' 处理提交逻辑，拼接选中的日期时间
Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)
    Try
        Dim selectedDateTime As New DateTime(
            Integer.Parse(ddlYear.SelectedValue),
            Integer.Parse(ddlMonth.SelectedValue),
            Integer.Parse(ddlDay.SelectedValue),
            Integer.Parse(ddlHour.SelectedValue),
            Integer.Parse(ddlMinute.SelectedValue),
            0
        )
        lblResult.Text = $"你选择的日期时间是：{selectedDateTime.ToString("yyyy-MM-dd HH:mm")}"
    Catch ex As Exception
        lblResult.Text = "选择的日期无效，请重新选择"
        lblResult.ForeColor = Drawing.Color.Red
    End Try
End Sub

这个简易版不需要任何前端框架，完全靠服务器端逻辑生成选项，虽然没有日历弹窗那么直观，但胜在轻量，适合对界面要求不高的场景。

内容的提问来源于stack exchange，提问作者Indra suandi