jQuery Datepicker - in the too hard basket?

Classic General
1

Tricky one here for all you js & php wiz’s.

I am using StackApps quite extensively as my sites are db driven.
StackApps provided some excellent stacks for all kinds of db related pages.
Sadly the developer has stopped responding and updating the product.
Don’t blame him actually as it was always a free product and he must have spent hours putting it together.
Hopefully someone might pick up the pieces and continue with the product… and I would happily pay for it.

Anyhow, StackApps includes a neat input field for a form that has a date type and an option to use datepicker.
The datepicker uses a call to the jquery datepicker.
However the datepicker bit doesn’t work and I can’t find the problem.

Anybody out there have some knowledge of how to bolt the jquery datepicker to a field on a form please?
There is a “class” attribute available but I’m thinking it is related to formatting and not functionality. It’s popup help says “Single or list of CSS classes attached to this field”.

Any help appreciated…

Cheers, Lance

2

Hi Lance,

If you have the option to customise the date input field (the HTML code for it), you might be able to leverage the new HTML5 date attribute, as documented here:
http://html5doctor.com/html5-forms-input-types/

Basically you add type="date" to the form input. In newer web browsers, that should prompt the display of a datepicker. Therefore you might be able to avoid the hassle (and extra burden) of needing jQuery UI or another heavy framework.

I can’t honestly remember if StackApps ships with jQuery UI or not - it’s a little while since I’ve used StackApps. Possibly if it does and you are trying to use it in Stacks 3, then the version of jQuery Stacks calls might not match the version jQuery UI wants. You see, jQuery and jQuery UI are two separate things, but the latter has dependency on the first. There might therefore be a conflict between the two. A check of the web console might reveal any errors being logged.

-Will.

3

Hi Will,

Thank you for your great response.

Yes I have set the type to “date” which works perfectly in Chrome but not in Firefox and Safari.
I checked the html5doctor test page and it said the date function is not supported for those two browsers.
I also checked an iPhone and it worked there ok.

So I went back to the page armed with your suggestion and had a look at the console and resources.
You are spot on… the page is loading the following scripts (and some others):
jquery-2.1.4.min.js
jquery.min.js - ajax.googleapis.com
jquery-ui.js - code.query.com ← this one is v1.9.1

And the following stylesheets (and some others):
jquery-ui.css - code.query.com ← this one is v1.9.1

Here are two errors found in console:

TypeError: undefined is not an object (evaluating ‘$.ui’)
(anonymous function)jquery-ui.js:13
(anonymous function)jquery-ui.js:338

TypeError: $ is not a function. (In ‘$’, ‘$’ is undefined)
(anonymous function)calendar_dates:238

So I’m guessing I need to go through the StackApps code and find the reference to jquery and change it to the latest version: v1.11.4.

Thanks again and any further assistance greatly appreciated.

Cheers,
Lance

4

Hi again Will,

Working through this and I’m a bit of a blind man with stacks!

I am using a StackApps input stack and after looking through your “build your own stack” tutorial I have tracked down the template.html for it.

Found this code:

(<)!-- include DatePicker support →
(<)link rel=“stylesheet” href=“http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css” />
(<)script src=“http://code.jquery.com/ui/1.9.1/jquery-ui.js”>

So I figure if I change the script src to read "(<)script src=“http://code.jquery.com/ui/1.11.4/jquery-ui.js>” I should get the latest version loaded.

Do I need to do anything with the link ref as I can’t find a new version of this stylesheet?

And finally do I just make the change and re-publish the page for the changes to happen?

Thank you,
Lance

5

This is a tricky one for me to answer, for the simple reason I’m not the developer of StackApps!

What I would say is that jQuery UI is quite finicky about jQuery versions. In projects where I’ve encountered jQuery UI, updating it (and other dependencies like jQuery) has frequently fixed a slew of browser compatibility problems, that a client might have been experiencing and got important functionality in a website working again.

I have downloaded StackApps from the website and opened the package contents. Strangely I’m not seeing any references to jQuery UI or a datepicker script. It looks like there is an option in the stack to choose what version of JQuery you want to use and then it gets hard-coded into the page - probably not the best method for handling jQuery in Stacks 3.

6

Hi Will,

Thanks for taking the time with this. I certainly appreciate it.

The reference to jQuery is in the “Input” stack. It may be in others but I haven’t gone through them… yet!
I’m going to cut the reference to jQuery and datepicker out of the stack, leave the ability to set the type to “date” and rely on the browser to do the datepicker.

Not sure what I will break but this seems to be the best way forward for compatibility reasons.

Thanks again Will… wish me luck :slightly_smiling:

Cheers,
Lance

7

I hope this helps as I think you have (or had) the same issue I had.

Date picker worked perfectly on the desktop versions but the mobile versions would would always come back as invalid.

mobile date picker would display the date dd/mm/yyyy so I did a custom format… still fail but when I changed the format to dd-mm-yyyy which was the same as the mysql database it worked.

I may have completely misunderstood your issue and just told you something you already know.