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?

Shawn31313 · Accepted Answer · 2011-12-31 18:03:01Z

6

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"})%>

edited Dec 31, 2011 at 18:03

Shawn31313

6,0564 gold badges43 silver badges86 bronze badges

answered Dec 30, 2011 at 16:24

Emmanuel N

7,4592 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ayman Safadi Over a year ago

You shouldn't have 2 identical ids on the same page.

ZVenue Over a year ago

I tried this before. It did not work. Now I commented the first text box <input type="textbox".....> and then Html.TextBox started working. Is it because datepicker can be used by only one at a time...?

Emmanuel N Over a year ago

@Ayman Safadi do you realy think I belive a down vote for that?

Emmanuel N Over a year ago

@ZVenue use class instead of id, you can have multiple elements with same class name.

ZVenue Over a year ago

How can I make the Html.TextBox take only input from the calendar and not typing?

|

Collectives™ on Stack Overflow

jQuery UI Datepicker for a Html.TextBox control

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related