jQuery UI - Date Picker in MVC4

 

In the MVC view, change from EditorFor() to TextBoxFor() and add a htmlAttribute @class = “data-datepicker”

 

In the script,

1. get and format now as today date

2. $(‘input.data-datepicker’) to target the field defined in view

3. .attr(“value”, now) to assign default value of today

4. .datepicker() to enable jQuery UI datepicker function

 

In the MVC view, add 3 references

1. jQueryUI (~/bundles/jqueryval)

2. CSS of jQueryUI (~/Content/themes/base/css)

3. Our own javascript file (~/bundles/MyScript)

 

In the BundleConfig.cs, we can see jquery.ui.datepicker.css included in ~/Content/themes/base/css

 

Output result:

 

Reference Site:

http://jqueryui.com/datepicker/