jquery datepicker in mvc3

Question

I want to use jquery date picker on all datetime fields, so I have following inside my mvc3 project

Model

public DateTime? DateTime{ get; set; }

Views/Shared/EditorTemplates

@model DateTime?
@Html.TextBox("", Model.ToString(), new { @class = "date" })

and on _Layout.cshtml page I have

$(document).ready(function () {
   $(".date").datepicker();
});

I have referenced datepicker css and other jquery files (jqueryui and jquery-1.5.1.js)

   <script src="@Url.Content("~/Scripts/jquery-1.5.1.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>

<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />

error message is following

TypeError: $(".date").datepicker is not a function
[Break On This Error]       
$(".date").datepicker();

Thanks

Darin Dimitrov · Accepted Answer · 2012-09-09 19:25:49Z

1

You seem to have included jquery twice: the standard and the minified version. Get rid of one of the two. Also make sure that your custom script comes after them:

<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>

answered Sep 9, 2012 at 19:25

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

Comments

techie_28 · Accepted Answer · 2012-09-09 16:42:01Z

0

You didnt inculde the jQuery and jQuery UI(.js files not .css) libraries which this date picker belongs to.

answered Sep 9, 2012 at 16:42

techie_28

2,1454 gold badges44 silver badges65 bronze badges

2 Comments

panjo Over a year ago

actually I have included, just updated question with added js.

techie_28 Over a year ago

Your error message indicates absence of .Js files.Please check the jS files that you are including are getting included correctly on the page and also look if any of these files is not corrupt or blank.I think it should fix the problem.Or you can give us a URL to see this.

keshav · Accepted Answer · 2012-09-10 01:20:31Z

0

I have few suggestions.

try updating jquery to the lates version which i think is 1.8.1
i dont think you need model.tostring just model shoud work in this cale // dont think this is causing the issue but just a suggestion

answered Sep 10, 2012 at 1:20

keshav

87611 silver badges19 bronze badges

Collectives™ on Stack Overflow

jquery datepicker in mvc3

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related