Hi,

I'm trying the incoming jquery_update module, release 6.x-2.x-dev that upgrades jQuery to 1.3.2. That step needs to upgrade jQuery UI to 1.7.x, which I also did, and it all seems to be working ok, but I have problems with Date popup widgets. No javascript error, but the datepicker popup looks really bad and doesn't seem to have all the same UI components in there as before the upgrade.

Since I have installed jquery_ui module, Date is taking the jQuery UI components from there. It worked ok with jQuery 1.2.6 and jQuery UI 1.5.3, but not now with jQuery 1.3.2 and jQuery UI 1.7.1.

I have investigated this a little and identified several sources of possible conflict:

- Date popup provides custom CSS classes for ui.datepicker that could have changed due to the new CSS scheme introduced in jQuery UI 1.7.x. This probably needs revision in Date popup module.

- Date popup provides custom ui.datepicker settings, but the options in jQuery UI 1.7.x have changed. Some are missing, some may have been added with defaults that don't play well with Date popup. Also, this probably needs revision in Date popup module.

- Date popup provides jQuery Time Entry plugin version 1.4.0. Latest version of this plugin is 1.4.3. Their package also provides an additional .js file that brings compatibility with jQuery 1.3.x. I guess Date popup module would have to provide a method to use this compatibility library when needed and upgrade the plugin to latest version.

I'm sorry for not being 100% specific on which things are exactly causing problems, I haven't had the time to analyze this issue further, so please take the above as a primer look of possible sources of conflict.

Maybe someone else tried jquery_update to 1.3.2?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

NickAT’s picture

I came across this thread while trying to fix a problem with date popup. After installing JQuery module and JQuery UI 1.7.2 my date popup widget no longer contained the correct theme data. It still functioned correctly, it just looked horrible. Anyway after some digging and reading it turns out that my JQuery Update module was either outdated, not installed correctly or corrupted, after re-installing the module ver. 1.2, everything seemed to return to normal and I am looking forward to themeing some of the widgets. Also, make sure that all of your files in the jquery.ui folder are updated to 1.7.2, the first time I copied the update I still had some 1.6 files lurking around. Don't know if your problem is as simplistic as mine, but I hope that helps.

Patrizio’s picture

I have the same problem.
The css for datapicker is too bad updating jquey

emptyvoid’s picture

Status: Active » Patch (to be ported)
FileSize
1.05 KB

Hello I too had this conflict.. I have attached the css changes I had to make to get it to display like it should.

Just extract the gzip archive and paste the datepicker.css into

/drupalroot/sites/all/modules/date/date_popup/themes/

Clear your cache and check a date field using the popup.

Patrizio’s picture

Status: Patch (to be ported) » Needs review

My calendar looks like before the css change :-(

Patrizio’s picture

Status: Needs review » Patch (to be ported)

Sorry ... I try a second time and now the calendar seem patched.
Maybe a cache problem.

AdrianB’s picture

Subscribing

artscoop’s picture

FileSize
71.72 KB

Well I managed to make this work with JQuery 1.3.2 and jQuery UI 1.7.
It took some time to make the theme work fine.
However, now, I cannot customize the Datepicker settings once it's loaded.

If I set anything in date_popup.js, it works, however, I need to have different settings according to the context.

Here is the current progress.

fugazi’s picture

set format (dd.mm.yyyy) popup (mm/dd /yyyy) Wrong format and I can not change it.
can you help me?

many greetings

Countzero’s picture

#7 more or less works. Just had to change background of .ui-datepicker to #fff otherwise it was transparent.

Thanks for the files.

The question about the format interests me too.

design.er’s picture

I guess I have to use the latest dev release of the date module to get it to work?
Currently I use date 6.x-2.4 and experienced the problem that after upgrading only the date popup module from #7 the css styles from the whole website are gone - the website is plain. Clearing the caches didn't help. I downgraded to the stable version again.

Any ideas?

entrigan’s picture

#3 worked for me (did not try 7, as a css only fix seemed logical)

entrigan’s picture

Category: feature » bug
Status: Patch (to be ported) » Needs review

On a side note, would not the proper way of handling this is to let jquery UI supply the theming?

andypanix’s picture

Assigned: spadron81 » Unassigned

Hi, it seems that you can use any jQuery UI theme. Just pick your customised theme at http://jqueryui.com/download (just include datepicker and core), download your jquery-ui-1.7.3.custom.zip, extract it and go into css/themename folder (i.e. css/smoothness).

Rename the file jquery-ui-1.7.3.custom.css to datepicker.css and overwrite datepicker.css + images folder in your date_popup/themes folder. You can add a couples of lines at the beginning of your new datepicker.css to make some minor adjustments:

[edit 2010-08-04, css code updated]

#ui-datepicker-div
{
	font-size: 100%;
	font-family: Verdana, sans-serif;
}
.ui-datepicker-calendar TR
{
	border-bottom-width: 0;
}
#ui-datepicker-div TD, #ui-datepicker-div TH
{
	font-size: 10px;
	text-align: center;
	line-height: 18px;
}
#ui-datepicker-div TH SPAN
{
	font-size: 12px;
}
#ui-datepicker-div TD A
{
	text-align: center;
}
.ui-datepicker-calendar TR:hover
{
	background-color: inherit;
}

I've done some preliminary tests on Firefox 3.6, IE8 (IE8 compatibility mode) and Chrome and it seems to work.

@entrigan: I agree with your side note.

servantleader’s picture

Thanks this is helpful.

mfer’s picture

date_popup detects if jquery ui is installed and uses that for the JS. What about detecting the jQuery UI css and using that as well. This would cause the jquery ui css to be consistent through the site as well.

I think the code change to date_popup would look something like:

/**
 * Implementation of hook_init().
 */
function date_popup_init() {
  if (module_exists('jquery_ui')) {
    drupal_add_css(drupal_get_path('module', 'jquery_ui') .'/jquery.ui/themes/base/ui.all.css');
  }
  else {
    drupal_add_css(drupal_get_path('module', 'date_popup')  .'/themes/datepicker.css');
  }
  if (variable_get('date_popup_timepicker', 'default') == 'default') {
    drupal_add_css(drupal_get_path('module', 'date_popup')  .'/themes/timeentry.css');
  }
}

Note, this is untested code.

This should be in jquery_ui if someone wants to write something nice up for that.

spadron81’s picture

Assigned: Unassigned » spadron81

hello, when I install jquery_update 6.x-2.x-dev not working properly, the installation seems okay but when I try to access to links in the administration panel a jquery screen appears with a loading and do nothing, I use it in conjunction with module "Wysiwyg" to load images, the error message is as follows:

Your jquery version is to old to use wysiwyg_imageupload. Therefore you jquery_update Need to install 6.2.x, 6.1.x. Not jquery_update Please read point three at this howto to fix this.

but version 6.2 is under development, and apparently that is why there are these errors

Brentnauer’s picture

#13 works great for me. I had to add z-index to the css because of my theme but it works perfect.

obrienmd’s picture

Subscribing.

KarenS’s picture

Assigned: Unassigned » spadron81
Status: Needs review » Needs work

The reason for overriding the default css in the first place was the the default css was really ugly on a Drupal site.

So, how to support all versions of jquery? There is no patch here, just a lot of ideas to solve bits and pieces of the problem. One issue is the css, another is the version of the timepicker, another is whether some of the datepicker (and maybe timepicker) options are different between versions and how to incorporate those changes into the code in a way that will work in all versions.

I would love an actual patch that addresses all those issues. But this is not in 'needs review' state without a patch.

Also, please don't post zip files, post patches :)

KarenS’s picture

The timepicker has been updated, so one thing off the list should be fixed now.

KarenS’s picture

The included datepicker is also now removed. Too many people were using it as a crutch and I started warning that it was going away almost a year ago. So now the datepicker comes only from jQuery UI, which will help. In particular I started worrying that people were using the jquery _update module with the included code. Forcing people to use jQuery UI will help ensure they are matching the right versions of things.

arlinsandbulte’s picture

Should jQuery UI module be added to the list of dependancies in date_popup.info?

KarenS’s picture

Status: Needs work » Fixed

No, I didn't add it to the list of dependencies because if you add a new dependency to a module that is already enabled you are not able to install the new module (there's a long long core bug issue about that.) So I just added a warning that will show to the superuser on every page until they update.

OK, I came up with some workable css and the beginnings of a method to let people choose which css they want to use and committed that. If anyone wants to improve on that they can dive in and make a patch.

Coupon Code Swap’s picture

Hi Karen. The reason people have been using the included datepicker is that jQuery UI module is a headache to deal with. In my experience, jQuery UI has been nothing but problems ever since Date module started recommending it and this is still the case.

1. the warning message seems to be wrong after installing jQuery UI properly (there is still a message about it even after it is properly installed).

The Date Popup module now requires the jQuery UI module as a source for the datepicker. Please install it immediately.

This eventually goes away but can be confusing.

2. If I select the option for jQuery UI Default css, the popup has a transparent background and is unusable.

3. The popup randomly stops working. I have to clear the cache, then save the Date popup settings and then hope it starts working again. Sometimes it does, sometimes it doesn't. This has happened twice now since installing the new version of Date module last night along with jQuery UI. Perhaps this has to do with an incompatibility with Javascript aggregation. It is just strange that it seems to randomly stop working at times.

4. The jQuery UI module uses discontinued and legacy versions of jQuery UI (version 1.6 / 1.7). The last stable release for jQuery UI module was June 21, 2009, over a year ago! I'm using the latest dev version.

Can you please put back the crutch, because at least it works properly.

Coupon Code Swap’s picture

Actually, I found a better solution: uninstall and remove jQuery UI, uninstall Date Popup and use the Select List option for Date instead. Not only is it going to work properly, it also eliminates a considerable amount of bloated code. I was using a theme roller CSS file for datepicker and removed all the invalid code. Even after doing so, the file was quite large. Here's the approximate savings after I removed jQuery UI and Date Popup:

CSS:

Aggregated optimized CSS file (with jQuery UI + Date Popup): 55 KB
Aggregated optimized CSS file (sans jQuery UI + Date Popup): 33 KB

Approximate file size reduction: 40%

JavaScript:

Aggregated optimized minified Javascript file (with jQuery UI + Date Popup): 240 KB
Aggregated optimized minified Javascript file (sans jQuery UI + Date Popup): 120 KB

Approximate file size reduction: 50%

So, jQuery UI accounts for around 50% of the CSS / Javascript code for the entire website (and of course this is compounded by the numerous aggregated files that get created). That is an incredible amount of code bloat for a stupid little popup calendar.

Unless you really need a shiny calender interface, it is probably best not to use it.

KarenS’s picture

I am not going to put back the jquery ui code, it is old and outdated and I had a ton of issues related to people trying to use it with the wrong versions of jquery ui and jquery update.

Having the jquery ui code in a single central location is the right 'Drupal' way to do this, that makes it possible for other modules to also use the datepicker and makes it easy to use other jquery ui elements without conflict. If there are problems with jquery ui, the problems should be handled in the jquery ui issue queue. The date module has way too many things to deal with already without trying to ensure javascript works across multiple versions of jquery and jquery update. jquery issues are very specialized and I am not the best person to try to support it, even if I had an abundance of time to do so.

The new code to use the default css that comes with jquery ui was a feature request and it needs more work, you don't have to use it, patches are welcome. There is still an option to use our adapted css. If you are using jquery ui version 1.6 you should see no difference between what was in here before and what is in here now. The only css that looks different is the css for jquery ui version 1.7 and jquery update, and the old widget would probably not have worked with that combination anyway.

You can also use the select widget instead, as you noted, if you don't use jquery ui for anything else but this. In my experience, many people are using multiple jquery widgets and need it anyway.

Plus jquery ui is in core in D7, so you will end up with it one way or another by then, and this change makes it much easier for me to port the Date code to D7.

Josh Benner’s picture

jQuery UI theme support doesn't seem to work, as themes need more than ui.datepicker.css included. Rather than assume someone else has included ui.theme.css, and until the work over here (http://drupal.org/node/388384) is finished, this patch is a stop-gap. I have added inclusion of ui.theme.css, basic jQuery UI theme detection, and an option to include no CSS at all (useful if you want to have your theme pull the entire theme in from a CDN).

Coupon Code Swap’s picture

@KarenS

It will be great if jQuery UI is supported in core with D7. I was just kind of frustrating having a feature that was working properly removed and then making another module required that introduces a lot of code bloat, doesn't work properly and hasn't had a stable release in over a year. I completely understand the rationale behind this, it just isn't so good from an actual usage standpoint. Anyways, onwards and upwards, looking forward to D7...

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

fmjrey’s picture

Patch #27 solved my problem of transparent background in datepicker.
I don't know the history of this issue, but seeing it marked as "fixed" while one of its patch solves an existing issue doesn't seem right to me...

fmjrey’s picture

Status: Closed (fixed) » Needs review
FileSize
2.24 KB

I've upgraded to from 6.x-2.6 to 6.x-2.7 so I created an updated patch equivalent to patch #27 for 6.x-2.7. It should also work on 6.x-2.x.
I'm also reopening this issue as this patch solves some css problem and I don't think it should have been closed automatically.

kong’s picture

Assigned: spadron81 » Unassigned
FileSize
2.86 KB

Hi my setup is as follows:

  • date-6.x-2.x-dev
  • jquery_ui-6.x-1.x-dev (with jQuery UI 1.7.3)
  • jquery_update-6.x-2.x-dev (with jQuery 1.3.2)

I got the same issue as #24 which is

2. If I select the option for jQuery UI Default css, the popup has a transparent background and is unusable.

So I dug into the code and came up with this patch. What it does is:

  • Fixes the default theme css (transparent background) problem.
  • Allows the superuser to select the theme they want from drop-down list.

The themes must be put in jquery.ui/themes directory. You can read the comments in the patch for more detail.

Hunabku’s picture

The patch 31 did not work for me - on 6.x-2.7 and jQuery UI 1.7.3

The following did:
In date popup configuration (/admin/settings/date_popup) be sure to select Datepicker css: jQuery UI default

In template.php > function mytheme_preprocess_page

insert contents of:

	//Fixes problem with date popup not accessing default jquery-ui.css
	$vars['head'] .= '<link type="text/css" rel="stylesheet" media="all" href="/sites/all/libraries/jquery.ui/themes/base/jquery-ui.css" />';

You might be able to use base_path... or drupal_add_css above but this works for me.

thelocaltourist’s picture

@kong Thanks for the patch in #32! I've used it every time there's a new Date module release, and I hope they commit it soon!

Status: Needs review » Needs work

The last submitted patch, date-popup-jquery-ui-themes-436490-32.patch, failed testing.

xjm’s picture

Assigned: Unassigned » xjm
Status: Needs work » Needs review

Thanks @kong! #32 resolves this issue for me. Code review:

  1. +++ b/date_popup/date_popup.moduleundefined
    @@ -57,17 +57,34 @@ function date_popup_css_options() {
    +  // $jquery_ui_path should contain path to jquery.ui directory, not the module directory.
    ...
    +      // $jquery_ui_path contains path to jquery.ui directory
    ...
    +      // $jquery_ui_path contains path to jquery.ui directory
    

    Comments should wrap at 80 characters and end in periods. However, we don't really need comments referring to the pre-patch code, so I'd remove these entirely.

  2. +++ b/date_popup/date_popup.moduleundefined
    @@ -57,17 +57,34 @@ function date_popup_css_options() {
    +  // Each theme must be put in jquery.ui/themes/ in their own directory
    

    Should be "its" rather than "their." Also, there should be a comma before "e.g."

  3. +++ b/date_popup/date_popup.moduleundefined
    @@ -57,17 +57,34 @@ function date_popup_css_options() {
    +  if ($handle = opendir($jquery_ui_path .'/themes/')) {
    +    while (false !== ($dir = readdir($handle))) {
    +      $full_dir_path = $jquery_ui_path .'/themes/'. $dir;
    +      if (is_dir($full_dir_path) && $dir != '.' && $dir != '..' && $dir != 'base') {
    +          $paths[$full_dir_path .'/ui.datepicker.css'] = $dir;
    +      }
    +    }
    +    closedir($handle);
    +  }
    

    Perhaps it would be simpler to use a different PHP function here, like scandir() for example?

  4. +++ b/date_popup/date_popup.moduleundefined
    @@ -81,7 +98,18 @@ function date_popup_init() {
    +  // If use other theme then load the css file in the corresponding theme directory.
    

    This comment is over 80 characters and isn't really a complete sentence. I'd suggest: "Otherwise, load the CSS file in the corresponding theme directory."

I'll clean up the patch with these changes.

xjm’s picture

Assigned: xjm » Unassigned
FileSize
2.58 KB
2.6 KB

Attached fixes the issues described in #36 and also makes the select box option text for the jQuery UI themes a little nicer. No idea if the same issue exists in the 7.x branch.

arlinsandbulte’s picture

Status: Needs review » Fixed

Thanks! Especially for tracking down and marking all those duplicates!

Committed #38:
http://drupalcode.org/project/date.git/commit/29bbd46

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

joachim’s picture

Status: Closed (fixed) » Active

I am still seeing a transparent date popup with the latest version of date module, in Garland with all caches cleared.

I have jQuery UI 6.x-1.4 but not jQuery update.

joachim’s picture

... and admin/settings/date_popup dies with

( ! ) Fatal error: Call to undefined function jquery_ui_get_path() in sites/all/modules/contrib/date/date_popup/date_popup.module on line 64

If there is now a minimum version of jQuery UI, this should be stated on the project page!

joachim’s picture

Updated jQuery UI to 6.x-1.5. Still got a transparent background on my pop-up calendar with the 'Date pop-up default' selected, though fixed with the jQuery UI one.

roderik’s picture

Not sure if this helps... but... I also had a transparent date popup (in a Zen-based theme, also updated jQuery UI to 6.x-1.5)...

...and after fiddling with admin/settings/date_popup, things worked again.

My stored 'date_popup_css_file' variable was not ok anymore. (Which in my case was because I moved sites/all/modules/date to sites/all/modules/contrib/date for some unrelated reason.)

gpk’s picture

Yes after upgrading to Date 6.x-2.9 I started to get this problem of the transparent background but have now fixed it.

After upgrading Date I initially noticed I could sometimes get a PHP error related to jQuery UI, so upgraded to jQuery UI 6.x-1.5 (note that you then need to download or move the jQuery UI library to sites/all/libraries - previously it used to live underneath the jQuery UI module's folder).

After doing these 2 things the think which I think fixed it was to visit Administer --> Site configuration --> Date Popup Configuration and (re-)submit that form ... hitting Reset to Defaults is usually OK to do here!

I had also cleared all the site caches and refreshed the browser, so hard to tell exactly which steps were key. Possibly visiting update.php would have done the trick also.

Anyway it all works now. :-)

FWIW I am now using Date 6.x-2.9, jQuery UI module 6.x-1.5, jQuery UI library version 1.6. Am also using jQuery Update 6.x-2.0-alpha1 but I think that has nothing to do with the transparency problem.

@42 yes I think jQuery UI 6.x-1.5 is now required. Leaving this issue open until the project page states this.

@44 yes I also moved the date module to a different folder. Would be useful if this edge case were handled better.

And as a final side-note: visiting the Status report page is a useful way of checking if jQuery UI is properly up-and-running.

GuillaumeDuveau’s picture

Any plans regarding a new stable release including the patch in #38 ?

DamienMcKenna’s picture

Status: Active » Closed (won't fix)

Unfortunately the Drupal 6 version of the Date module is no longer supported. That said, we appreciate that you took time to work on this issue. Should this request still be relevant for Drupal 7 please feel free to reopen it. Thank you.