jQuery UI Datepicker for a Html.TextBox control

Question

I need to show the jQuery UI Datepicker plug in for Html.TextBox, how can I do this?

jQuery Code:

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

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

The above code gives me a text box control in my MVC view where I can click on the control and it pops up a calendar control, it works well, but what I want is to reproduce the same behavior for a Html.Textbox I am using later in the code, like this:

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

How can I get the jQuery UI Datepicker plugin to work in the above line of code?

Solution

Add class="datepicker" to your 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"})%>