admin管理员组

文章数量:1397024

Im trying to implement a date picker in my form however when the code it added the date picker does not display in the brewers. When the console is inspected this error is posted TypeError: 'undefined' is not a function (evaluating '$( "#datepicker" ).datepicker()') The jQuery library file is added in the root folder.

Bellow is the code used:

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

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datepicker</title>
<link rel="stylesheet" href="jquery-ui-1.10.4.custom.css">
<script src="jquery-1.10.2.js"></script>
<script src="datepicker.js"></script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

Im trying to implement a date picker in my form however when the code it added the date picker does not display in the brewers. When the console is inspected this error is posted TypeError: 'undefined' is not a function (evaluating '$( "#datepicker" ).datepicker()') The jQuery library file is added in the root folder.

Bellow is the code used:

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

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datepicker</title>
<link rel="stylesheet" href="jquery-ui-1.10.4.custom.css">
<script src="jquery-1.10.2.js"></script>
<script src="datepicker.js"></script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
  • javascript
  • jquery
  • jquery-ui
  • datepicker
Share Improve this question edited Feb 5, 2014 at 17:03 Arunkumar Srisailapathi 1,1692 gold badges8 silver badges27 bronze badges asked Feb 5, 2014 at 16:19 user3182518user3182518 2274 gold badges6 silver badges14 bronze badges 1
  • Try putting the datepicker () call inside the head tag after the necessary includes are made. – Arunkumar Srisailapathi Commented Feb 5, 2014 at 17:03
Add a ment  | 

6 Answers 6

Reset to default 0

You need to put your jQuery code after including jQuery and datepicker core file:

<script src="jquery-1.10.2.js"></script>
<script src="datepicker.js"></script>
<script>
    $(document).ready(function() {
        $( "#datepicker" ).datepicker();
    });
</script>

You may also need to add the jquery-ui.js after the jquery-1.10.2.js entry.

Try placing the 

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

at the end of the file after the html tag and around a script tag e.g.

<script type="text/javascript">
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
</script>

I just tried the following code in VS2012 and it works. You will need to changed the version numbers here to your own.

<html xmlns="http://www.w3/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script src="Scripts/jquery-ui-1.8.20.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p>Date: <input type="text" id="datepicker"></p>
    </div>
    </form>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {
        $("#datepicker").datepicker();
    });
</script>

Make sure you have all the scripts pointing to the correct location in your workspace.

Try putting the jQuery's document.ready function inside the head tag after the necessary includes are made.

I guess by markup, script tags are to be placed either inside the body tag or the head tag

Hope this works.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datepicker</title>
<link rel="stylesheet" href="jquery-ui-1.10.4.custom.css">
<script src="jquery-1.10.2.js"></script>
<script src="datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

This perfectly works.

jsFiddle Demo: http://jsfiddle/arunkumars08/98CRq/

HTML: 

<p>
Date: 
<input type="text" id="datepicker" />
</p>

JS:

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

I had this same problem. What I did to fix it was to add a reference to the scripts after the control.

<head>
  <link href="../Scripts/jquery-ui-1.11.1.custom/jquery-ui.css" rel="stylesheet" />
  <script src="../Scripts/jquery-2.1.1.js"></script>
</head>
<body>
  <div>
    <input type='text' onkeypress='return false' class='datepicker' />
  </div>
  
  <script src="../Scripts/jquery-ui-1.11.1.custom/external/jquery/jquery.js"></script>
    <script src="../Scripts/jquery-ui-1.11.1.custom/jquery-ui.js"></script>
  <script>
        $(this).ready(function () {
            $(".datepicker").datepicker();
        });
    </script>
</body>

you need to add the function that will invoke the datepicker for your input label. put the js code at the end of the file. also don´t forget to include this code this into a function that will execute itself:

<script type="text/javascript">
$(document).ready(function() {
$( '#datepicker' ).datepicker();
});
</script>

or

<script type="text/javascript">
(function() {
$( '#datepicker' ).datepicker();
})();
</script>

本文标签： javascriptjQuery datepicker when loaded says undefinedStack Overflow

版权声明：本文标题：javascript - jQuery datepicker when loaded says undefined. - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744140952a2592617.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。