ASP.NET MVC and Jquery DatePicker

Question

I want to use jQuery UI date picker with the following date field

 <div class="editor-field">
            @Html.EditorFor(model => model.CalibrationDate)
            @Html.ValidationMessageFor(model => model.CalibrationDate)
  </div>

I have already include required script and the following function in my view

<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/jquery-ui-1.8.20.js")" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        $('.date').datepicker({ dateFormat: "dd/mm/yy" }
    });

It seems that I need to assign date class to my

 @Html.EditorFor(model => model.CalibrationDate)

Can you please suggest me how to do that? or any other approach to get this functionality?

Based on comments, here is the final working code:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".date").datepicker();
});
</script>

and in the body

<div class="editor-label">
            @Html.LabelFor(model => model.CalibrationDate)
        </div>
        <div class="editor-field">

           @Html.TextBoxFor(m => m.CalibrationDate,  new{ Class = "datepicker" })
            @Html.ValidationMessageFor(model => model.CalibrationDate)
        </div>

this might answer you question. [StackOver Question 4576209][1] [1]: stackoverflow.com/questions/4576209/… — JkenshinN
– JkenshinN, Commented Feb 25, 2013 at 13:12
alternative way (editor template) : nickharris.net/2010/08/… — AliRıza Adıyahşi
– AliRıza Adıyahşi, Commented Feb 25, 2013 at 13:14

Edward Brey · Accepted Answer · 2013-12-23 11:47:34Z

2

You can pass EditorFor an anonymous object with a class member as its additionalViewData parameter.

@Html.EditorFor(model => model.CalibrationDate, new { @class = "date" })

Note: Using an @ symbol in front of a keyword allows us to use it as an identifier.

edited Dec 23, 2013 at 11:47

Edward Brey

42.1k21 gold badges214 silver badges269 bronze badges

answered Feb 25, 2013 at 13:11

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

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

Collectives™ on Stack Overflow

ASP.NET MVC and Jquery DatePicker

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related