X
Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

Congratulation. Your latest update (19) has broken Jquery date pickers on websites all over the planet

Posted

Millions of websites that call Jquery datepickers in input fields with a date attribute no loner work today for users viewing those sites with FF 19. First Chrome breaks date pickers, now Firefox. I suppose the rest of the browser will not want to be left out of whatever brilliant idea on the horizon that is the root cause of all this, but this is serious. MILLIONS of websites no longer work, and webmasters are scrambling to find solutions. Whatever was planned by all you browser folks for input fields with a date attribute, will never materialize because you have forced people to call date pickers by some alternate method. That means input fields with a date attribute will be disappearing.

Thanks a lot guys!

Chosen solution

For me at least, the issue is now irrelevant. Apparently the built in popup date picker that no serious web developers will not want, is here to stay.

The only option now, is to remove the type="date" attribute from input fields where you want to call a custom date picker. Instead, you should set the field to type="text" and call the custom date picker for input fields with a specific class name.

Read this answer in context 0

Additional System Details

Installed Plug-ins

  • npsitesafety
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.
  • Shockwave Flash 11.5 r502
  • Google Update
  • Next Generation Java Plug-in 10.11.2 for Mozilla browsers
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • Adobe PDF Plug-In For Firefox and Netscape 10.1.5
  • GEPlugin
  • TrendMicro Toolbar Rating Plugin
  • 4.1.10329.0
  • NPWLPG
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Office Authorization plug-in for NPAPI browsers
  • np-mswmp

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0

More Information

jscher2000
  • Top 10 Contributor
2363 solutions 20912 answers

Helpful Reply

Since I've missed the background on this, could you provide a link to a page demonstrating the problem?

In Bugzilla I see a lot of bugs targeting Firefox 20 with new functionality for <input type="date">. I wonder whether something got into Firefox 19 accidentally/prematurely?

Question owner

http://viptopia.net/join.php

Click on the date of birth field. A jquery date picker should pop up. Befor today, it did. For years, web developers have been using the type="date" attribute to call a Jquery popup date picker when the input field is clicked.

It seems as though the Chrome browser folks, and now the Firefox browser folks, suddenly believe that they need to control the behavior of all input field with a date attribute set. I can't help but wonder why.

What it all means to website developers, is that custom date pickers can no longer be called with an onclick event for input fields with a dat attribute set. No one will want to wait to find out what all the browser folks have in mind, so now we'll all have to set date fields on input forms to type="text" and call the custom date picker in text fields that have a specific class name, and remove the type='date' attribute.

Whatever cute little plan for the type="date" mozilla may have, is irrelevant, because no website dev will want to use it.

jscher2000
  • Top 10 Contributor
2363 solutions 20912 answers

As temporary fix for Firefox 19 -- before an actual date picker widget is wired up to the field -- you could follow the lead of this demo page and test to see whether the date type is actually supported: http://jsfiddle.net/p58bt/241/. I don't know whether that will work with the older libraries used on viptopia.net (jQuery v1.3.2 and jQuery UI 1.7.2).

Also, you might prefer not to add yet another library...

Related article: http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/

Tyler Downer
  • Administrator
  • Moderator
1165 solutions 6639 answers

What version of Jquery are you using? Support for older versions is flaky at best, so you should update. Do you have an example website?

lukaszwierz 0 solutions 4 answers

Helpful Reply

Hi everyone, I have similar problem. After updating FF 19 -> 20 , datepickers have a failure. Month and Year selects couse whole picker DIV to hide - should work like day number selector - just stay in place. It happends only in FF 20 - works in other browsers and FF 19. Does any one have the same problem?

jscher2000
  • Top 10 Contributor
2363 solutions 20912 answers

Hi lukaszwierz, could you post a link to a page that has this problem so we can take a look at it?

lukaszwierz 0 solutions 4 answers

Hi, sadly I can't do that because of security mesures ;/... And bigger problem is that we've made some coding around datepicker so even if You had access you probably that its probably our fault. But like I said thing worked in FF 19, and works in chrome, opera, ie, and safari. But on the other hand when I go to jQuery-UI site and look at their examples it works to.... I wrote here just like a lucku shot ;)

jscher2000
  • Top 10 Contributor
2363 solutions 20912 answers

Hi lukaszwierz, do you have another computer where you could test the beta of Firefox 21? If it's a problem limited to Firefox 20 for internally facing systems, perhaps it is not worth doing a lot of debugging? http://www.mozilla.org/firefox/beta/

Chosen Solution

For me at least, the issue is now irrelevant. Apparently the built in popup date picker that no serious web developers will not want, is here to stay.

The only option now, is to remove the type="date" attribute from input fields where you want to call a custom date picker. Instead, you should set the field to type="text" and call the custom date picker for input fields with a specific class name.

Modified by jdelasko

lukaszwierz 0 solutions 4 answers

Thanks jscher2000 for the tip. Tried it and in 21 it doesn't work also. something in update 19->20 must have change some thing. Looking in to list of changes but I don't see anything relevent. Any way thanks for help. Will try to dig this deaper.

lukaszwierz 0 solutions 4 answers

Ok I found source of my problem. Actually my colleague found it. Still dont know if its a bug but maybe it will help someone. We had a function that supposed to hide datepicker element on mouse click anywhere else than datepicker.

$(document).click(function(){ var $visibleSlidePanes = $('.popup-content:visible'); if (!$visibleSlidePanes.data('on-pane-click')) { $visibleSlidePanes.trigger('slideclose');

$visibleSlidePanes.hide(); var $slidePane = $visibleSlidePanes.closest('.slide-pane'); $slidePane.find('.want-selected-flag').removeClass('selected'); $slidePane.removeClass('selected'); } $visibleSlidePanes.data('on-pane-click', false); });

It seems like with FF 20 clicking an option of select inside a datepicker is treated as outside. When I dig deaper i took event and target of click and everywhere outside it worked giving me back DIV, UL .... HTMLObjects, but when clicked on option of select it gave me just document Object. I made a quick fix and it seems to work.

bstrech 0 solutions 1 answers

lukaszwierz I also am finding the same problem with FF 20 on both Mac and PC. I cannot reproduce it on Jquery UI 1.10.2, but I can with 1.8.16.

This is when you have the datepicker configured with changeMonth: true and changeYear: true.

I am currently debugging through the 1.8.16 to figure out why I am getting a document.click event which is propagating up when either month or year is selected.

jackberg 0 solutions 1 answers

This the code that firefox 20 broke for me. I have not tested 19.

http://jsfiddle.net/nFHdg/2/

After selecting a year the datepicker disappears because a document click event is triggered where the target is [object HTMLDocument]. In other browsers this event is not triggered at all.