Uncaught TypeError datepicker is not a function anonymous function

Question

I found few answers on stack overflow but still cant resolve my problem  I am running on Django but I dont think it is relevant for this error   I try to make work my date picker java script but I am getting the error   1 27 Uncaught TypeError         datepicker is not a function anonymous function    1 27fire   jquery-1 9 1 js 1037self fireWith   jquery-1 9 1 js 1148jQuery extend ready   jquery-1 9 1 js 433completed   jquery-1 9 1 js 103 jquery-2 1 0 min js 4 XHR finished loading  POST  https   localhost 26143 skypectoc v1 pnr parse  l cors a crossDomain send   jquery-2 1 0 min js 4o extend ajax   jquery-2 1 0 min js 4PNR findNumbers   pnr js 43parseContent   contentscript js 385processMutatedElements   contentscript js 322  This is all my scripts     lt meta charset  utf-8  gt   lt meta http-equiv  X-UA-Compatible  content  IE edge chrome 1    gt     lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt   lt script src  http   code jquery com ui 1 11 0 jquery-ui js  gt  lt  script gt    lt script type  text javascript  gt    document  ready function             dateinput   datepicker   format   yyyy mm dd            lt  script gt          lt  -- Bootstrap core JavaScript                                                    -- gt   lt  -- Placed at the end of the document so the pages load faster -- gt   lt script src  https   ajax googleapis com ajax libs jquery 2 1 4 jquery min js  gt  lt  script gt    lt script gt window jQuery    document write   lt script src        assets js vendor jquery min js  gt  lt   script gt    lt  script gt   lt script src  http   getbootstrap com dist js bootstrap min js  gt  lt  script gt   lt  -- Just to make our placeholder images work  Don t actually copy the next line  -- gt   lt script src  http   getbootstrap com assets js vendor holder min js  gt  lt  script gt   lt  -- IE10 viewport hack for Surface desktop Windows 8 bug -- gt   lt script src  http   getbootstrap com assets js ie10-viewport-bug-workaround js  gt  lt  script gt    lt script type  text javascript  gt                  document  ready function                           extra-content   hide                          toggle-content   click function                              extra-content   toggle                                              lt  script gt                any feedback will be very appreciated

User · Answer

This error is occur because the function is not defined  In my case i have called the datepicker function without including the datepicker js file that time I got this error

User · Answer

if you are using ASP NET MVC  Open the layout file   Layout cshtml  or your custom one  At the part of the code you see  as below    Scripts Render    bundles bootstrap    RenderSection  scripts   required  false   Scripts Render    bundles jquery     Remove the line   Scripts Render    bundles jquery      at the part of the code you see  past as the latest line  as below     Styles Render    Content css    Scripts Render    bundles modernizr    Scripts Render    bundles jquery     This help me and hope helps you as well

User · Answer

The error is because you are including the script links at two places which will do the override and re-initialization of date-picker   x000D   x000D   lt meta charset  utf-8  gt  x000D   lt meta http-equiv  X-UA-Compatible  content  IE edge chrome 1    gt  x000D   x000D   x000D   lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt  x000D   lt script src  http   code jquery com ui 1 11 0 jquery-ui js  gt  lt  script gt  x000D   x000D   lt script type  text javascript  gt  x000D    document  ready function     x000D          dateinput   datepicker   format   yyyy mm dd      x000D       x000D   lt  script gt  x000D   x000D         lt  -- Bootstrap core JavaScript x000D                                                     -- gt  x000D   lt  -- Placed at the end of the document so the pages load faster -- gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 4 jquery min js  gt  lt  script gt  x000D   x000D   x000D    So exclude either src  https   ajax googleapis com ajax libs jquery 2 1 4 jquery min js   or src  http   code jquery com ui 1 11 0 jquery-ui js   It will work

User · Answer

What went wrong   When you include jQuery the first time    lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt   lt script src  http   code jquery com ui 1 11 0 jquery-ui js  gt  lt  script gt    The second script plugs itself into jQuery  and  adds         datepicker   But then you are including jQuery once again    lt script src  https   ajax googleapis com ajax libs jquery 2 1 4 jquery min js  gt  lt  script gt    It undoes the plugging in and therefore        datepicker becomes undefined   Although the first   document  ready block appears before that  the anonymous callback function body is not executed until all scripts are loaded  and by then         window   to be precise  is referring to the most recently loaded jQuery   You would not run into this if you called     dateinput   datepicker immediately rather than in   document  ready callback  but then you d need to make sure that the target element  with class dateinput  is already in the document before the script  and it s generally advised to use the ready callback   Solution  If you want to use datepicker from jquery-ui  it would probably make most sense to include the jquery-ui script after bootstrap  jquery-ui 1 11 4 is compatible with jquery 1 6  so it will work fine   Alternatively  in particular if you are not using jquery-ui for anything else   you could try bootstrap-datepicker

User · Answer

You just need to add three file and two css links  You can either cdn s as well  Links for the js files and css files are as such  -    jQuery dataTables min js dataTables bootstrap min js dataTables bootstrap min css bootstrap-datepicker css bootstrap-datepicker js   They are valid if you are using bootstrap in your project   I hope this will help you  Regards  Vivek Singla

User · Answer

Including more than one reference to Jquery library is the reason for the error Only Include one reference to the Jquery library and that will resolve the issue

[javascript] Uncaught TypeError: $(...).datepicker is not a function(anonymous function)

Examples related to javascript

Examples related to jquery

Examples related to django

Examples related to datepicker