jQuery DatePicker Not Displaying

I’m trying to use this jQuery datepicker to this page. If you scroll down the page to the ‘plus’ sign and click it, you will see a ‘Start Date’ and an ‘End Date’ textbox. Clicking inside them, a calendar pop up is suppose to display. It doesn’t.
I have both the jquery and jquery UI loading. Chrome Developer Tools does not show any conflicts. The class I’m using on these textboxes is ‘datepicks’.

Why won’t the datepicker display?


The problem is that those date fields are dynamically added to the page, after you’ve initialised the datepicker component. What you need to do is something like this:

$('body').on('focus', '.datepicks', function() {

This attaches a handler to the body tag that listens for any time an element with the class ‘datepicks’ receives the focus. When it does, it initialises a datepicker widget on that element.

Taking your advice, fretburner, I created:

        jQuery('body').on('focus', '.datepicks', function() {

in the head tag and still do not see a pop up. No errors, just no calendar pop up.

If you look where you’ve put that in the page, it’s coming before the body tag… so jQuery tries to attach the handler and fails (silently) because there’s no body element. Move your script block just before the closing </body> tag.

Good point and thank you! I’m still trying to understand the difference between loading jQuery scripts in the head or in the body.

Now I’m getting closer, but the datepicker seems a bit scrunched:

THAT can’t be normal!

Looks like you have code for a different datepicker included in the page. Try changing this line jQuery(this).datepicker(); to jQuery(this).gdatetimepicker();

Actually, I’m going to import their CSS and make some minor modifications to it. I have some of my own code conflicting with it.

Thanks for the awesome support, fretburner! I know I’ll be coming back with more inquiries. You guys are great!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.