如何在 ASP.NET 中使用带有图标和格式的 JQuery Datepicker答案

【问题标题】：How I can use JQuery Datepicker with a Icon and a Format in ASP.NET如何在 ASP.NET 中使用带有图标和格式的 JQuery Datepicker
【发布时间】：2012-11-29 10:20:44
【问题描述】：

我想为我的文本框使用 jQuery。我想使用格式为yyyy-mm-dd 和图标的日期选择器。

<script>
    $( "#txtVon" ).datepicker({
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true     
    });
</script>

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

我该怎么做？

【问题讨论】：

您需要记住，除非您在 Web 配置中使用静态客户端 ID，否则您的 txtVon 框将具有类似于 $contentSomething_txtVon 的 ID，而不仅仅是 txtVon，因此您的 JS 不会运行。

标签： c# javascript jquery asp.net jquery-ui-datepicker

【解决方案1】：

在使用 ASP.NET WebForms 时，您最好在引用元素时使用 类而不是 ID，因为呈现的 ID 会有所不同：

<script>

            $(".txtVon").datepicker({
            showOn: "button",
            buttonImage: "images/calendar.gif",
            buttonImageOnly: true
            });


</script>
<asp:TextBox ID="txtVon" runat="server" class="txtVon"></asp:TextBox>

【讨论】：

我个人会避免类的想法并坚持使用 ID。 ASP .NET 4 具有客户端 ID 功能：codeproject.com/Articles/34151/ASP-NET-4-0-Client-ID-Feature 或在所有其他 ASP 中，您可以依赖生成的 ID 始终相同的事实。运行时检查文本框，然后在代码中使用该 ID。
@RyanMcDonough 如果您不使用 .NET 4 ClientID 功能，则无法确定 ID 始终相同。如果对 MasterPage 中的名称进行更改，这将影响 WebForm 中所有控件的 ID。
@RyanMcDonough 课程是安全的。这些永远不会改变。 ASP.NET 4 静态 ClientID 基本上是一种解决方法，因为 ID 会重新呈现。如果有一种无需使用变通方法即可做某事的方法，我通常会采用该选项:)

【解决方案2】：

试试：

<script type="text/javascript">
  $(document).ready(function() {
    $("#txtVon.ClientID").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
  });
</script>

不要忘记包含js 文件。

【讨论】：

【解决方案3】：

试试

$.datepicker.formatDate('yyyy-mm-dd', new Date(2012, 1 - 1, 26));

我认为链接 here 和 here 会有所帮助

【讨论】：

【解决方案4】：

<script>

            $(".txtVon").datepicker({
            showOn: "button",
            buttonImage: "images/calendar.gif",
            buttonImageOnly: true,
            dateFormat: "yy-mm-dd"
            });


</script>
<asp:TextBox ID="txtVon" runat="server" class="txtVon"></asp:TextBox>

正如@Curt 所建议的，使用类名来绑定日期选择器。另外，请确保您的图像存在于上述路径中。您可以为所需结果使用的日期格式是"yy-mm-dd"

【讨论】：

【解决方案5】：

确保以下文件可供参考。

jquery-1.5.1.min.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.datepicker.js
jquery-ui-1.8.14.custom.css

HTML 代码

<script>
$( "#txtVon" ).datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    dateFormat: 'yyyy-mm-dd'
});
</script>
Date: <asp:TextBox ID="txtVon" runat="server" CssClass="txtVon" />

【讨论】：