Solved

jQuery Date picker not working

Posted on 2016-09-08
16
129 Views
Last Modified: 2016-09-22
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/
0
Comment
Question by:Alex Mac
  • 8
  • 8
16 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41789451
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
 

Author Comment

by:Alex Mac
ID: 41789511
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41789679
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:Alex Mac
ID: 41789755
Yes I see thanks.

So how do I fix it? Do I need to stop wordpress loading javascript files in the footer?
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41789783
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
 

Author Comment

by:Alex Mac
ID: 41790080
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41790190
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
 

Author Comment

by:Alex Mac
ID: 41790217
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
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41790363
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
 

Author Comment

by:Alex Mac
ID: 41790397
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
 

Author Closing Comment

by:Alex Mac
ID: 41790398
Great help!
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41790436
You are welcome.
0
 

Author Comment

by:Alex Mac
ID: 41810925
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41810968
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
 

Author Comment

by:Alex Mac
ID: 41810993
Great help, thanks again!
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41811395
You are welcome.
1

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question