Uncaught TypeError: $(...).datepicker is not a function(anonymous function)
What went wrong?
When you include jQuery the first time:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
The second script plugs itself into jQuery, and "adds" $(...).datepicker
.
But then you are including jQuery once again:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
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.
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.
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