让 JQuery DateTimePicker 插件与 asp.net 文本框一起使用

Question

一周多来，我一直在尝试让 JQuery DateTimePicker 插件与 asp.net 文本框一起工作。我根本无法得到它，我不知道为什么。

您能帮我完成它吗？

ASP.NET 代码：

<asp:Content ID="Content2" ContentPlaceHolderID="bodyContent" Runat="Server">
<style type="text/css">
/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
</style>

<script src="Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
    $(function () {
        $("#start_DateTime").datetimepicker();
        $("#end_DateTime").datetimepicker();
    });
</script> 

<label for="start_DateTime">
                            Start Date & Time</label>
                        <asp:TextBox ID="start_DateTime" CssClass="textarea" runat="server"></asp:TextBox> </asp:Content>

此文本框中未显示任何内容。另外，在 Internet Explorer 中浏览页面之前，我收到以下错误消息，我不知道为什么：

更新：

我修改了我的代码以包含

$('#' + '<%= start_DateTime.ClientID %>').datetimepicker();

而不是

$("#start_DateTime").datetimepicker();

我仍然遇到同样的错误。当我在 IE 中运行 Jscript 调试器时，它会显示以下内容：

更新 #2：

我终于明白了，但我不知道为什么它会出现在文本框的顶部。它应该出现在它的下方和右侧。

Answer 1

加载时间选择器插件之后 jquery ui。 datetimepicker 插件依赖于 jquery ui。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>

试试：

$('#' + '<%= start_DateTime.ClientID %>').datetimepicker();

如果你不考虑由 asp.net 生成的 id，你可以通过一个类来代替。

<asp:TextBox ID="start_DateTime" CssClass="textarea datepicker" runat="server"></asp:TextBox>


$(function(){
   $(".datepicker").datetimepicker();
});

Answer 2

ASP.NET 在运行时动态重命名 ID 属性，因此如果您在浏览器中查看 HTML 源代码，您会发现“start_DateTime”只是呈现的 ID 标记的一小部分。

您可以通过一些努力获得呈现的 ID，但您是否考虑过使用以下为在 ASP.NET 中使用 JQueryUI 而构建的库？

http://juiceui.com