35

有没有与 ASP.NET 日历控件配合得很好的免费/开源时间选择器控件？

4

11 回答 11

44

您的问题的答案是，是的，有很好的免费/开源时间选择器控件与 ASP.NET 日历控件配合得很好。

ASP.NET 日历控件只需编写一个 HTML 表格。

如果您使用的是 HTML5 和 .NET Framework 4.5，则可以改用 ASP.NET TextBox 控件并将TextMode属性设置为“日期”、“月”、“周”、“时间”或“DateTimeLocal”——或者如果如果您的浏览器不支持此功能，您可以将此属性设置为“DateTime”。然后，您可以读取 Text 属性以从 TextBox 中以字符串形式获取日期、时间、月份或星期。

如果您使用的是 .NET Framework 4.0 或更早版本，则可以使用 HTML5 的<input type="[month, week, etc.]">；如果您的浏览器不支持此功能，请使用<input type="datetime">.

如果您需要服务器端代码（用 C# 或 Visual Basic 编写）来获取用户在日期字段中输入的信息，那么您可以尝试通过runat="server"在 input 标记内写入来在服务器上运行该元素。与所有 ASP 一样，请确保为该元素提供一个 ID，以便您可以在服务器端访问它。现在，您可以读取 Value 属性以将输入的日期、时间、月份或星期作为字符串获取。

如果您无法在服务器上运行此元素，则除了<input type="[date/time/month/week/etc.]". 在提交函数中（用JavaScript编写），将隐藏字段的值设置为输入类型=“日期”，或“时间”，或“月”，或“周”的值——然后在服务器上——侧代码，将该隐藏字段的 Value 属性也读取为字符串。

确保 HTML 的隐藏字段元素可以在服务器上运行。

于 2015-01-22T01:01:59.117 回答
33

在文本框中添加：

textmode="Date"

它为您提供了像这样漂亮的 Datepicker：

日期选择器

其他变体是：

textmode="DateTime"

它给你这样的外观：

日期时间选择器

textmode="DateTimeLocal"
于 2018-11-13T15:07:59.963 回答
27

JQuery 拥有最好的日期选择器恕我直言。虽然它不是特定于 .Net 的，但它仍然很好用。

HTML：

<input type="text" value="9/23/2009" style="width: 100px;" readonly="readonly" name="Date" id="Date" class="hasDatepicker"/>

在头部元素中：

<script src="../../Scripts/jquery-1.3.2.min.js" language="javascript" type="text/javascript"/>
<script src="../../Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"/>

就那么简单！

于 2009-09-24T01:05:39.990 回答
8

由于它是我唯一使用过的，我建议使用http://www.ajaxcontroltoolkit.com/的 CalendarExtender

于 2009-09-24T00:58:30.913 回答
6

这是没有 jquery 的解决方案。

在 WebForm -> Source of WebForm 中添加日历和文本框有这个：

<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="DateChange">
</asp:Calendar>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

在 WebForm 的 cs 文件中创建方法：

protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.Text = DateTime.Today.ToShortDateString()+'.';
    }

    protected void DateChange(object sender, EventArgs e)
    {
        TextBox1.Text = Calendar1.SelectedDate.ToShortDateString() + '.';
    }

方法 DateChange 与日历事件 SelectionChanged 相关联。它看起来像这样：日期 选择器图像

于 2017-02-22T21:16:08.677 回答
4 
<asp:TextBox ID="TextBox1" runat="server" placeholder="mm/dd/yyyy" Textmode="Date" ReadOnly = "false"></asp:TextBox>
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
于 2020-07-17T03:53:18.377 回答
3

基本日期选择器精简版

这是他们的旗舰产品的免费版本，但它包含一个原生用于 asp.net 的日期和时间选择器。

于 2009-09-24T01:13:44.233 回答
3

如果您使用引导程序，请尝试引导程序日期选择器。

于 2014-02-21T02:16:20.970 回答
2

有一个简单的、开箱即用的实现：HTML 5input type="date"和其他与日期相关的输入类型。

好的，您不能对控件进行太多样式设置，并且它不适用于每个浏览器，但是从长远来看，如果所有现代浏览器都支持它并且不想包含繁重的库，它仍然是一个非常好的选择在移动设备上并不总是那么好用。

于 2016-03-16T08:53:48.530 回答
1

如果您想使用文本框，请注意将 TextMode 属性设置为“日期”在 Internet Explorer 11 上不起作用，因为它当前不支持“日期”、“日期时间”或“时间”值。

这个例子说明了如何使用一个文本框来实现它，包括日期的验证（因为用户可以只输入数字）。它适用于 Internet Explorer 11 以及其他 Web 浏览器。

<asp:Content ID="Content"
         ContentPlaceHolderID="MainContent"
         runat="server">

<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script>
   $(function () {
   $("#
   <%= txtBoxDate.ClientID %>").datepicker();
   });
 </script>
 <asp:TextBox ID="txtBoxDate"
           runat="server"
           Width="135px"
           AutoPostBack="False"
           TabIndex="1"
           placeholder="mm/dd/yyyy"
           autocomplete="off"
           MaxLength="10"></asp:TextBox>
 <asp:CompareValidator ID="CompareValidator1"
                    runat="server"
                    ControlToValidate="txtBoxDate"
                    Operator="DataTypeCheck"
                    Type="Date">Date invalid, please check format. 
 </asp:CompareValidator>
 </asp:Content>
于 2019-05-24T13:46:58.213 回答
1 
@Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control", @type = "date" } })

这很好用

于 2019-08-15T11:45:09.687 回答