CODEWITHSUNDEEP
jqueryasp.net-mvc-3
panjo
panjo

Reputation: 3515

jquery datepicker in mvc3

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

Upvotes: 1

Views: 1347

Answers (3)

keshav
keshav

Reputation: 876

I have few suggestions.

  1. try updating jquery to the lates version which i think is 1.8.1
  2. 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

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038790

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>

Upvotes: 1

techie_28
techie_28

Reputation: 2133

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

Upvotes: 0

Related Questions