jQuery datepicker 没有出现在 asp.net 文本框控制器中

Posted 2023-05-08

【中文标题】jQuery datepicker 没有出现在 asp.net 文本框控制器中

【英文标题】：jQuery datepicker not appearing in asp.net textbox controller

【发布时间】：2016-10-01 00:41:45

【问题描述】：

下面是我的代码

<script type="text/javascript" src="jquery-ui-1.11.4/jquery-1.4.1.min.js"></script>
<link href="jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function() 
    
        $('#myDate').datepicker();
    );
</script>

我正在创建 asp.net 控制器，如下所示：

<asp:TextBox ID="myDate" runat="server"></asp:TextBox>

但是，当我点击文本框时，什么也没有发生，日期选择器窗口也没有出现。

【问题讨论】：

您没有包含 jquery ui javascript 文件

@Mivaweb 你能详细说明一下吗？我没有得到你。

@JamesRonalde 你已经包含了 jquery 库和 jquery ui css 样式表，但没有包含 jquery ui 库文件

@Mivaweb 你能发表一个答案吗？

用解决方案查看我的答案

【参考方案1】：

Jquery 代码是客户端代码，但 ASP:Textbox 是服务器端控件（您的文本框 id 是服务器端的“myDate”），但是当它转换成 html 它可以像“ContenPlaceHolder_myDate”一样​​改变它的id，所以在客户端找不到“myDate”id，为了解决这个问题，我们可以使用ClientID来解决服务器端控件 ID 转换为客户端控件（HTML 控件）。

    <script type="text/javascript">
        $(document).ready(function() 
        
            $('#<%=myDate.ClientID %>').datepicker();
        );
    </script>

【讨论】：

试试这个还不够。解释你做了什么，以便 OP 能够理解这一点！

我想我错过了#，现在检查

【参考方案2】：

您没有包含正确的库来使用datepicker 插件。

Example jQuery Datepicker

您需要在 head 标签中添加以下内容：

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

另外，您使用的是 ASP.NET，因此您的 ID 可能完全不同。 看看 Durgesh Pandey 的答案。

可以看到需要取你输入框的ClientID。

【讨论】：

我添加了这个，但它不起作用：/仍然没有显示

什么都没有。没有错误。当你点击它时它什么也不做。

【参考方案3】：

myDate 在这里是一个服务器控件。所以你不能通过你在 jquery 代码中编写的内容来访问它，所以检查下面的 jquery 代码

<script type="text/javascript">
    $(document).ready(function () 
        $("#<%= myDate.ClientID %>").datepicker();
    );
</script>

【讨论】：

解释你做了什么，以便 OP 明白你在这里做什么。

【参考方案4】：

如果您想通过控件的 ID 分配 datepicker，我知道这可能不是您的解决方案。但是，如果您不想在呈现为 HTML 时被 ID（服务器端）和 ID 混淆，使用 Control 的 CssClass 属性可能会更容易。

<script type="text/javascript">
    $(document).ready(function ()
    
        $('.datePickerClass').datepicker();
    );
</script>

<asp:TextBox ID="myDate" runat="server" CssClass="datePickerClass"></asp:TextBox>

【参考方案5】：

我认为您应该将“datepicker”更改为“datetimepicker”并指定格式（如果您只想要一天）

【讨论】：

Datepicker 是 jquery ui 中现有的插件