jQuery Date picker not working

Hi,

I'm trying to get jquery datepicker to work on this site but I cant get it to pop up, I get an error saying datepicker is not a function, even though I have loaded the jquery ui script.

The url is: http://www.quotechief.com/testquote/
Alex MacAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Julian HansenConnect With a Mentor Commented:
Ok I found the problem

your input has the class "hasDatepicker" - that is used by jQueryUI to determine if a datepicker has already been assigned.

Remove the class hasDatePicker from your <input> that are bound to the datepicker and it should work fine.
1
 
Julian HansenCommented:
Take a look at your source on line 23
$(function() {
    jQuery "#dob" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "-16Y", minDate: "-120Y", yearRange: "1800:2000" });
  });

Open in new window

   
Specifically the jQuery "#dob"). bit - that is not valid.

Should be jQuery("#dob) if you were using the no-conflict option of jQuery - but in the next line you are using the $ - so maybe standardise on that.

Also you don't have to put each of those datepicker bindings in their own $(function) - you can just use one
$(function() {
  $("#dob" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "-16Y", minDate: "-120Y", yearRange: "1800:2000" });
  $( "#residentSince" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
  $( ".convictionDate" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
});

Open in new window

0
 
Alex MacAuthor Commented:
Hi Julian,

Thanks for your response, you caught me while I was changing a few things round to try to get it to work, i have changed the code to your suggestion and I am getting the original error saying .datepicker is not a function.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Julian HansenCommented:
Take a look at your code.

1. jQueryUI is declared before jquery
2. the JQueryUI script is commented out
3. The JQuery code is commented out
	 <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<!-- <script src="//code.jquery.com/jquery-1.10.2.js"></script> -->
  <!--<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>-->
 <script   src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script> 
 <!--  <script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"   integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="   crossorigin="anonymous"></script>-->
  <!--<link rel="stylesheet" href="http://wwww.quotechief.com/wp-content/themes/Avada/style.css">-->
  <script type="text/javascript">
/* jQuery(document).ready(function() {
jQuery(function() {
  jQuery("#dob" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "-16Y", minDate: "-120Y", yearRange: "1800:2000" });
  jQuery( "#residentSince" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
  jQuery( ".convictionDate" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
});
  });*/
  </script>

Open in new window

I took your code and moved the jQueryUI declaration, uncommented it and the script and added some input's to it - it worked first time. Code here
<!doctype html>
<html>
<head>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<!-- <script src="//code.jquery.com/jquery-1.10.2.js"></script> -->
<script   src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script> 
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<!--  <script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"   integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="   crossorigin="anonymous"></script>-->
<!--<link rel="stylesheet" href="http://wwww.quotechief.com/wp-content/themes/Avada/style.css">-->
<script type="text/javascript">
 jQuery(document).ready(function() {
    jQuery(function() {
    jQuery("#dob" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "-16Y", minDate: "-120Y", yearRange: "1800:2000" });
    jQuery( "#residentSince" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
    jQuery( ".convictionDate" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
  });
});
</script>
</head>
<body>
Resident :<input type="text" id="residentSince" /><br/>
DOB <input type="text" id="dob" /><br/>
CD <input type="text" class="convictionDate" /><br/>
</body>
</html>

Open in new window

You can see it working here
0
 
Alex MacAuthor Commented:
Yes I see thanks.

So how do I fix it? Do I need to stop wordpress loading javascript files in the footer?
0
 
Julian HansenCommented:
No, you need to fix the problems.

1. Don't comment out your scripts or your JQuery code
2. Move the JQueryUI <script> below the JQuery script
0
 
Alex MacAuthor Commented:
Hi I have now disabled all other jquery libraries being loaded and style sheets in case there was a conflict but I'm still getting nothing, any ideas what it could be?
0
 
Julian HansenCommented:
I know exactly what the problem is - as shown in the previous post. I don't know how you have configured your WordPress - that is a separate question. The question was why is your datepicker not working - the answer is your scripts were commented out and in the wrong order and your jQuery was commented out.

Somewhere you have included scripts in your template - either through the wp_head hook or preferably through wp_register_scripts and wp_enque_script - maybe you are hardcoding in the template - I don't know so I cannot answer your question.

How have you configured your template? Someone / something commented out that code - I doubt it was WP.
0
 
Alex MacAuthor Commented:
I commented out the code at the top and included it later on in the footer as some people on forums have suggested that is the better way of including javascript. But it made no difference.

I have now disabled all the wp_enque scripts in the functions.php and hardcoded the jquery and jquery ui at the top of the template along with the javascript underneath, but still I am getting nothing, I really don't understand why this is.

 I have done this many times on other wordpress sites but this really has me stumped. If it makes any difference this site is using the avada theme.

Thanks again for your help
0
 
Alex MacAuthor Commented:
Haha that's great. Thanks for that, I did wonder at one point why that was there but as it was in the previous forms I've done I thought I had to have that class included.

All sorted now, thanks for your help!
0
 
Alex MacAuthor Commented:
Great help!
0
 
Julian HansenCommented:
You are welcome.
0
 
Alex MacAuthor Commented:
Hi I've got another issue with the date picker on http://www.quotechief.com/testquote/ The date picker works on all fields but when you click on "Add Another Conviction" the datepicker doesn't work on the generated date fields, I've used a class selector for the jquery so it should work on the generated fields.

Any idea why it doesn't work?

Thanks
0
 
Julian HansenCommented:
When you bind the datepicker to its control like so
$('.class').datepicker();

Open in new window

The above essentially gets an array of all the elements that match .class and then binds those to the datepicker plugin. Anything that is created after that will not be bound because it's creation is post the binding process.
So you are going to have to re-bind your datepicker after adding the dynamic elements
Either by targeting that datepicker specifically or a general rebind of all the datepicker's.

Something like this might work
$('.convictionDate').datepicker()

Open in new window


Right after you do the append of the new content.

Here is a simple sample that demonstrates the concept
1
 
Alex MacAuthor Commented:
Great help, thanks again!
0
 
Julian HansenCommented:
You are welcome.
1
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.