CODEWITHSUNDEEP
c#jqueryasp.net-mvcdatepicker
Alan Schapira
Alan Schapira

Reputation: 1163

jQuery error in MVC project: Datepicker is not a function

This is what is in my view:

@Html.TextBox("toDateFilter", "", new { @class = "datepicker" })
...etc
...etc


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<script>
    $(document).ready(function () {
        $(".datepicker").datepicker();
    });
</script>

I am getting the error:

Datepicker is not a function.

I have followed the advice of all the other similar questions, and nothing has worked. I also changed the View to these imports instead:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" />

I also tried this instead:

var $j = jQuery.noConflict();
$j("#datepicker").datepicker();

Also I did check that the jquery-ui.min.js file loaded correctly.

Any ideas why this is going wrong? Let me know if I can supply more info...

Upvotes: 2

Views: 9215

Answers (3)

krishan
krishan

Reputation: 61

Datepicker is not a function. i am also facing this issue.i have resolved it using Jquery Noconflict function.

$.noConflict();
jQuery(document).ready(function ($) {
    $(function () {
        $('.datefield').datepicker();
    });
});

Upvotes: 6

Alan Schapira
Alan Schapira

Reputation: 1163

This is the answer from Starscream1984 in the comments, so props to them!

The issue is that the ready() function was being called before the jquery-ui.js script had finished loading.

This could not be fixed by moving it into the <head> nor loading the scripts from my own domain.

I was able to fix it simply by removing the ready() function entirely, and just running the contents.

If anyone knows how I can force the script to load first, or the ready() function to be called last, please let me know.

Upvotes: 1

Giorgos Kritsotakis
Giorgos Kritsotakis

Reputation: 19

Have you tried doing something like this:

$(function () {
    $("#nameOfTheFieldInModel").datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true
    });
});

In document ready?

Upvotes: 0

Related Questions