87👍
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.
3👍
The error is because you are including the script links at two places which will do the override and re-initialization of date-picker
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<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>
<script type="text/javascript">
$(document).ready(function() {
$('.dateinput').datepicker({ format: "yyyy/mm/dd" });
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
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..
- [Django]-Get virtualenv's bin folder path from script
- [Django]-How do I use CSS in Django?
- [Django]-Handle `post_save` signal in celery
2👍
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.
- [Django]-How to spread django unit tests over multiple files?
- [Django]-Any way to make {% extends '…' %} conditional? – Django
- [Django]-How to completely dump the data for Django-CMS
1👍
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
- [Django]-How to suppress the deprecation warnings in Django?
- [Django]-Numeric for loop in Django templates
- [Django]-Reducing Django Memory Usage. Low hanging fruit?
0👍
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
- [Django]-Django: Open uploaded file while still in memory; In the Form Clean method?
- [Django]-How do I go straight to template, in Django's urls.py?
- [Django]-Is Django post_save signal asynchronous?
0👍
We need to add the declaration of our jQuery plugin under interface with the same name. We don’t want to mess with the jQuery source code, so we need to create our own type definition file. I’m using React/typescript so just follow these steps
- Open nodemodules and go into types folder.
- Go into jQuery and open jQuery.d.ts fileand add the below code into interface JQuery<TElement = HTMLElement> extends Iterable {
daterangepicker(options?: any, callback?: Function) : any;
I’m declaring the daterangepicker function (this is the actual function that the API expose) and setting all its arguments as any ( You can go further and use specific types, but in this case, I will keep it simple ).
Now when the typescript compiler sees our interface, it will merge it with the jQuery interface and the error is gone.
That’s all!
- [Django]-GeoDjango GEOSException error
- [Django]-What is the purpose of NGINX and Gunicorn running in parallel?
- [Django]-Disable session creation in Django
-2👍
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.
- [Django]-Django filter JSONField list of dicts
- [Django]-Django – How to do tuple unpacking in a template 'for' loop
- [Django]-Get the latest record with filter in Django