用于 Html.TextBox 控件的 jQuery UI Datepicker答案

【问题标题】：jQuery UI Datepicker for a Html.TextBox control用于 Html.TextBox 控件的 jQuery UI Datepicker
【发布时间】：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 插件在上述代码行中工作？

【问题讨论】：

标签： jquery asp.net-mvc 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 只接受日历中的输入而不是打字？