ASP.NET DateTime Picker


ASP.NET DateTime Picker

是否有任何好的免费/开源时间选择器控件与ASP.NET日历控件很好用？

相关讨论

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

ASP.NET Calendar控件只写一个html表。

如果您使用的是HTML5和DOT.NET Framework 4.5，则可以使用ASP.NET TextBox控件，并将TextMode属性设置为"Date"，"Month"，"Week"或"Time"或" DateTimeLocal"或者如果您没有使用Chrome或Firefox或Internet Explorer，那么您也可以将此属性设置为"DateTime"。

然后读取Text属性以从TextBox获取日期，时间，月或周作为字符串。

如果您使用的是DOT.NET Framework 4.0或更早版本，那么您可以使用html5输入类型="日期"或输入类型="月"或输入类型="周"或输入类型="时间"或输入类型="datetime-local"或者如果您没有使用Chrome或Firefox或Internet Explorer，那么您也可以使用input type ="datetime"。

如果您需要在服务器端代码(用C＃或Visual Basic编写)用户在日期字段中输入的信息，那么您可以尝试通过在输入标记runat="server"内写入来在服务器上运行此元素

同时为此元素指定一个id，以便您可以在服务器端代码上访问它。
读取Value属性以将输入日期，时间，月份或周作为字符串。如果您无法在服务器上运行此元素，则除了输入type ="date"或"time"或"month"或"week"之外，还需要一个隐藏字段。
在提交函数(用javascript编写)中，将隐藏字段的值设置为输入类型="日期"，或"时间"，或"月"，或"周"的值，然后在服务器端代码，也将该隐藏字段的Value属性读为字符串。

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

希望有所帮助。

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

HTML：

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

头元素：

1
2
<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"/>

就那么简单！

相关讨论

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

相关讨论

在文本框中添加以下内容：

1
textmode="Date"

它为您提供了漂亮的Datepicker，如下所示：

DatePicker

其他变化是：

1
textmode="DateTime"

它给你这个样子：

Date Time Picker

1
textmode="DateTimeLocal"
相关讨论

这是没有jquery的解决方案。

在WebForm中添加Calendar和TextBox - > WebForm的源代码如下：

1
2
</asp:Calendar>
</asp:TextBox>

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

1
2
3
4
5
6
7
8
9
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与Calendar事件SelectionChanged连接。它看起来像这样：
DatePicker图片

如果您使用bootstrap，请尝试使用bootstrap-datepicker。

基本日期选择器精简版

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

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

好吧，你不能对控件进行那么多的设计并且它不适用于每个浏览器，但是如果所有现代浏览器都支持它并且不想包含重型库那么它仍然是长期非常好的选择。并不总是在移动设备上做得那么好。

如果您想使用文本框，请注意将TextMode属性设置为"Date"将无法在Internet Explorer 11上运行，因为它当前不支持"Date"，"DateTime"和"Time"值。

此示例说明了如何使用文本框实现它，包括验证日期(因为用户只能输入数字)。它可以在Internet Explorer 11以及其他Web浏览器上运行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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">
   
   $(function () {
   $("#
   <%= txtBoxDate.ClientID %>").datepicker();
   });
 
 <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>