用于 Html.TextBox 控件的 jQuery UI Datepicker

Posted 2023-05-07

【中文标题】用于 Html.TextBox 控件的 jQuery UI Datepicker

【英文标题】：jQuery UI Datepicker for a Html.TextBox control

【发布时间】：2012-01-30 16:16:36

【问题描述】：

我需要为html.TextBox 显示jQuery UI Datepicker 插件，我该怎么做？

jQuery 代码：

<script>
    $(function () 
        $("#datepicker").datepicker();
    );
</script>

<div class="demo">
     <p>Date: <input type="text" id="datepicker" style = "width:150px"/></p>
</div>

上面的代码在我的 MVC 视图中为我提供了一个文本框控件，我可以单击该控件并弹出一个日历控件，它运行良好，但我想要为 Html.Textbox 重现相同的行为我稍后在代码中使用，如下所示：

<%= Html.TextBox("Date", "", new  style = "width:150px")%> 

如何让 jQuery UI Datepicker 插件在上述代码行中工作？

【参考方案1】：

将class="datepicker" 添加到您的htmlAttributes

  <script>
 $(function () 
    $(".datepicker").datepicker();
 );
 </script>

 <div class="demo">
     <p>Date: <input type="text" id="datepicker" style = "width:150px"/></p>
 </div>
  <%= Html.TextBox("Date", "", new  style = "width:150px", @class = "datepicker")%>

【讨论】：

同一页面上不应有 2 个相同的 ID。

我以前试过这个。它不起作用。现在我评论了第一个文本框 然后 Html.TextBox 开始工作。是不是因为 datepicker 一次只能由一个人使用...？

@Ayman Safadi 你真的认为我会对此投反对票吗？

@ZVenue 使用class而不是id，你可以拥有多个同名的元素。

我怎样才能让 Html.TextBox 只接受日历中的输入而不是打字？