datepicker is not a function

Question

This question is already asked many times but none of them worked for me. I am trying to use this date picker in a JSP file. This is my script

<head>
<title>My Home</title>
<link rel="stylesheet" type="text/css"
href="../resource/css/page-style.css" />
<link rel="stylesheet" type="text/css"
href="../resource/css/jQuery-ui.css" />
<script src="../resource/js/jquery-1.9.1.js"></script>
<script src="../resource/js/jquery-ui.js"></script>
<script type="text/javascript" src="../resource/js/form-elements.js"></script>

<script type="text/javascript">
$("document").ready(function() {
    $("#shortcuts").load("shortcut.html");
    $("#datepicker").datepicker();
    alert('jQuery is working');
});
</script>
</head>

The shortcut file is loading perfectly, alert is also showing. I get error message as TypeError: $(...).datepicker is not a function. I am not facing this problem if I run this script in a html file placed in my desktop, when I copy the come code to my IDE and run it I get this error in my console. Please suggest me what can I do? I know this question is asked several times I have checked every answer this is the only link having close match to my prob but didn't work for me.

I don't think so. The same `head` tag I have in other file. Working perfectly. — NewUser, Mar 15 '13 at 06:44
make sure you have `DOM` with id of `datepicker` and also make sure `ID` is unique. — Dipesh Parmar, Mar 15 '13 at 06:44
code seems fine.. makesure your ui is loaded.. view source of your page and click the jquery-ui link in firefox to check if ui is loaded or not — bipen, Mar 15 '13 at 06:46
check that your `js` files has loaded properly or not.. You can see it with the help of `firebug` — Sagar Dalvi, Mar 15 '13 at 06:47
Checked for repeating id. NO Ids are unique. Checking for js files loaded or not may be this could help — NewUser, Mar 15 '13 at 06:48
it will be much bettter if you post a fiddle here http://www.jsfiddle.net — Devjosh, Mar 15 '13 at 06:56
http://stackoverflow.com/questions/1212696/jquery-ui-datepicker-datepicker-is-not-a-function/41435294#41435294 — Krishna, Jan 03 '17 at 01:45

score 39 · Accepted Answer · edited Nov 27 '15 at 07:54

39

The problem is with your imported files.I think you have not placed them properly.

Try to import these files

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

It is working for me.

see here for more information

edited Nov 27 '15 at 07:54

Community

1
1

answered Mar 15 '13 at 06:59

PSR

39,804
41
111
151

Replacing the relative source to the url works file. But, why? any guess? – NewUser Mar 15 '13 at 07:04
copy the same files now into your folder.then try – PSR Mar 15 '13 at 07:05
@Dibya whatever the files you are using previously they may not correct.otherwise the path what you gave is not correct – PSR Mar 15 '13 at 07:07
@Dibya are you copying those files – PSR Mar 15 '13 at 07:08
I was trying, I can refer to my jquery-ui.js file correctly but the reference file is not working locally. I have this code now: `` `` and this is working. :( – NewUser Mar 15 '13 at 07:15
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/26220/discussion-between-dibya-and-psr) – NewUser Mar 15 '13 at 07:16

score 20 · Answer 2 · answered Jan 09 '14 at 21:12

20

Double check that there are no JQuery references after your JQuery-ui reference.

I had an extra JQuery reference that came after my JQuery-ui reference and lost an hour chasing the problem. That will cause the datepicker not found error.

answered Jan 09 '14 at 21:12

Mark Kadlec

8,036
17
60
96

Good to know. Thanks. – Drk_alien Mar 15 '16 at 00:07
1

This answer needs to be on the top :) – Gotham's Reckoning Jun 01 '16 at 20:59
1

i had jquery imported by DataTable, then I referenced jquery ui, Then various references of jquery were referenced by the extensions installed in my chrome browser, therefore i was getting this error.
Now I am writing what worked for me, I moved the reference to jquery ui to the bottom of the page. IT WORKED – Akshay Vijay Jain Dec 12 '16 at 11:34

score 1 · Answer 3 · answered Oct 28 '18 at 16:44

This is something to do with the import files. I also faced the same scenario and following imports helped me to overcome the following issue "datepicker is not a function".

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

datepicker is not a function

3 Answers3

Linked