asp.net Web 窗体的 DateTime 选取器控件

      <asp:TextBox ID="TextBoxDateTime" runat="server" type="datetime-local"></asp:TextBox>

这条线可以解决问题。type=datetime-local 添加了日期时间选择器。只是一个简单的解决方案。但是 TextBoxDateTime.Text 以 ISO 字符串格式给出值。若要将其转换为 .NET 日期时间，请使用以下代码。

DateTime dateTime = DateTime.Parse(TextBoxDateTime.Text, null, System.Globalization.DateTimeStyles.RoundtripKind);

首先，让我们在这里纠正一些错误陈述。

报价：

没有提供日期时间选取器控件。

错！！！！可以肯定的是，这里有一个内置的日历控件，您可以使用，并且还有标准文本框控件的选项。

让我们首先使用标准文本框控件。

将文本框 + 拖放到 Web 窗体时，请注意该文本框的属性表设置。这些：

因此，有各种选择（时间选择器、密码、数字等），并且有多种日期选择。因此，在上面，我们从下拉列表中选择日期。

所以，用这个标记说：

        <h3>Enter a date</h3>
        <asp:TextBox ID="TextBox1" runat="server"
          TextMode="Date"   >

        </asp:TextBox>

        <h3>Code behind button test</h3>
        <asp:Button ID="Button1" runat="server" 
            Text="Test date value - code behind"
            CssClass="btn myshadow"
            OnClick="Button1_Click"
            />

到目前为止，背后的代码是这个简单的存根：

Protected Sub Button1_Click(sender As Object, e As EventArgs)

    Debug.Print($"Value of text box (date) = {TextBox1.Text}")

End Sub

因此，运行上述内容，我们得到/看到以下内容：

对于输出窗口，我们看到：

（我按了 2 次按钮）。

我还应该指出，如果您键入标记（而不是使用如上所示的属性表），那么您可以键入 textmode，点击 =，然后点击 ctrl-space（与 inteli-sense 一样），然后再次获得文本框的选项列表。

这：

因此，显然没有任何加载项，没有任何 JavaScript 代码，asp.net 支持并具有开箱即用的日期选择器功能。请注意日期在浏览器本地时间中的显示方式，但要获取（或设置）文本框，您需要使用 ISO 日期格式。

所以，比如说在页面加载时，我可以像这样将今天的日期设置为“默认”：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then

        TextBox1.Text = DateTime.Today.ToString("yyyy-MM-dd")

    End If

End Sub

（请注意 isPostBack 的所有重要测试，因为我们只希望此类默认值和设置代码在首页加载时运行，而不是用于其他回传。

接下来，如果查看工具箱，应该会看到一个日历控件

这个：

因此，我们可以将其拖到网页上，但该日历控件不是自动弹出控件，而是保持完整视图，因此您可以说将 2 个副本拖到网页上。并不是说日历控件具有广泛的格式设置选项，例如工作日、周末、今天等。

因此，我们将 2 个控件拖放到窗体上，现在我们有了以下标记：

            <div style="float: left">
                <h4>Select Start Date</h4>

                <asp:Calendar ID="dtStart" runat="server" Height="200px" Width="300px"
                    BorderColor="Black"
                    BorderStyle="Solid" BorderWidth="2px">
                    <DayHeaderStyle Height="40px" />
                    <DayStyle BorderStyle="Solid"
                        BorderColor="Black"
                        BorderWidth="1"
                        HorizontalAlign="Right"
                        VerticalAlign="Top" Height="40px" />
                    <OtherMonthDayStyle BackColor="LightSteelBlue" />
                    <SelectorStyle CssClass="btn-info" />

                    <TitleStyle Height="40px" />

                    <TodayDayStyle BackColor="LightSkyBlue" />
                    <WeekendDayStyle BackColor="Ivory" Height="30px" />
                </asp:Calendar>
            </div>


            <div style="float: left; margin-left: 30px">
                <h4>Select End Date</h4>

                <asp:Calendar ID="dtEnd" runat="server" Height="200px" Width="300px"
                    BorderColor="Black"
                    BorderStyle="Solid" BorderWidth="2px">
                    <DayHeaderStyle Height="40px" />
                    <DayStyle BorderStyle="Solid"
                        BorderColor="Black"
                        BorderWidth="1"
                        HorizontalAlign="Right"
                        VerticalAlign="Top" Height="40px" />
                    <OtherMonthDayStyle BackColor="LightSteelBlue" />
                    <SelectorStyle CssClass="btn-info" />

                    <TitleStyle Height="40px" />

                    <TodayDayStyle BackColor="LightSkyBlue" />
                    <WeekendDayStyle BackColor="Ivory" Height="30px" />
                </asp:Calendar>
            </div>

当我们运行上述操作时，我们有这个：

背后的代码可以是这样的：

Protected Sub Button1_Click(sender As Object, e As EventArgs)

    Debug.Print($"Value of text box (date) = {TextBox1.Text}")
    Debug.Print($"Value of Start calendar = {dtStart.SelectedDate}")
    Debug.Print($"Value of End calendar = {dtEnd.SelectedDate}")

End Sub

并输出：

（请注意，日历控件如何返回日期时间数据类型）。

因此，您可以使用文本框，只需设置 TextMode=“date”。

如前所述，您还可以使用日历控件。

所以是的，asp.net 文本框有一个日期模式。（它也有时间模式!!）。

如上所示，在工具箱中，还有一个可以使用的日历控件。