I’m a big fan of bootstrap and am trying to use the datepicker so I can select a range (from - till)
http://www.daterangepicker.com
I got this error and its kind of confusing to me
which is confusing me as I have a link to jquery before my link to the datepicker thing, so why is jquery not seeing it?
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
</script>
I looked at how to use the plugin, and I thought I set everything up right though.
Are you certain the URL is correct?
i.e. a folder with a period in its name.
the URL of what though, cause the src of the 3 javascriipt files seem right though.
You have a folder called bootstrap.daterangepicker ?
isnt that just the src to a javascript file?
view-source:http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js
It works but does it matter if its hosted on another server (cdn.jsdelivr.net) or should I save the file onto my server, put it in the js folder and rename the src to the other server to it points to the file on my server?
I had a look at the page for the date picker, and the URL does look correct, seeing the period in the middle of a folder did look odd.
What does your HTML look like that the JS is attached to?
yes (I think), here the source
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
</script>
It what you mean is the the three javascript files seem to be linking
Those are the links to the libraries being used by the date range picker, and the function that uses them. There must be something in your HTML <body> that the function is being attached to though; an <input> with the name attribute “daterange” - do you have one of those?
oh, yes I do
<input type="text" name="daterange" id="Availibility" class="form-control" value="Select start date - Select end date" />
```
Sorry for the confusion
Would I be correct in assuming that all of this is from the <head> of your document? If so, could you take just this part
…and place it just before your closing </body> tag. It may well be that the <input> tag you’re attaching your function to is not being rendered before the function is called.
I thought it was the best practice to put all javascript stuff just before the </body>, no?
Ill put the three links at the top & leave the bit of jquery before the
You can do it that way. I was checking where the code was more than anything. For the most part, you need to make sure the HTML you’re calling a function on is actually available, otherwise you ‘may’ get errors.
Let me see if I can recreate your code in Codepen and see what it does.
I got there in the end. It’s the value you’ve set in the <input>. It’s not a valid value. Check out this pen and you can see I’ve set the value at "" (an empty string).
1 Like
I think there may be a bug here then, cause when I change the value to “”, I get
Is that right?
I’m not too sure, as I don’t have your full HTML or CSS to test it out with. The only thing I can see is the typo in “Availability” - that may affect your CSS, but it’s not being referenced by the JS.
You are loading jQuery in your page twice; once up top and once again at the bottom with an older version.
When the second copy of jQuery is loaded, the $ variable gets overwritten by that copy, and you lose the $ variable that had all your jQuery plugins including bootstrap-daterangepicker attached to it.
TL;DR: Only include one copy of jQuery in your page.
2 Likes
ok, didn’t know the two links to jquery were causing a problem, so I commented out the old one.
But when I load the page, I check to console and…
then when I click the error (you can see link to at, but the error seems to happen when jquery is used to attach the function. But shouldn’t it work and not produce an error in the console?
The second copy isn’t commented out at svr.teamluke.net/edit_property_form.php
I did that, and here’s a screenshot showing that the date range picker works afterward:
This is definitely your problem and removing the second copy is definitely a solution.
Here’s another way to verify that in your console if you’d like:
-
Type $.fn.jquery to see the current jQuery version. Observe that you see 1.11.1, the old version.
-
Type $.fn.daterangepicker and see that this variable is undefined, rather than a function.
-
Type $.noConflict() in the console, which is a jQuery function that reassigns the $ variable to a previous version of jQuery if multiple have been loaded on a page.
-
Type $.fn.jquery and see that it’s now 1.12.4, the more recent version.
-
Type $.fn.daterangepicker and see that it’s no longer undefined, it’s a function, that was attached to the first copy of jQuery.
The TL;DR remains to simply delete the second script tag loading jquery twice.
1 Like
thanks, just noticed some wierd thing.
Im usind DreamWeaver as my IDE and here the bottom of that page,
]
but some code appears if I look at the source code for that page (I see what your talking about)
I cant find out where the annoying code is coming from
oh DUH, i had it in my footer.php file
my bad…Thanks though
The dates in the value of the text box should be database lookups (startDate, endDate) so what im trying to do is insert those dates in there, and if no date is selected, ask for a date to be selected…
So something like
if(isset($row['startDate'])) {
echo $row['startDate'];
} else {
echo "Select a date";
}
echo " - ";
if(isset($row['endDate'])) {
echo $row['endDate'];
} else {
echo "Select a date";
}
but don’t know how to with the datepicker
