The jQuery UI datepicker is visually broken. Note that jQuery UI is only in D8 core. Within Drupal 9, it is deprecated.

However, the D9 version of webform loads it's own version of the jQuery UI datepicker. This is only visible in Safari, as FF, and Chrome have their own UI. This may also be visible in IE and Edge.

Question: Should we support this, since it is not supported by D9 core?

CommentFileSizeAuthor
#16 date-picker-jquery-ui.png30.13 KBmherchel
olivero-date-picker.png46.66 KBhussainweb

Comments

hussainweb created an issue. See original summary.

poojakural’s picture

poojakural commented
Assigned: Unassigned » poojakural
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

@poojakural I don't see any update in the 3 days since you've assigned this to yourself. I'm going to start working on it. Post a patch if you have something!

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Assigned: poojakural » mherchel
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: Date picker gets a lot of padding » Date picker gets a lot of padding in Safari

This only happens in Safari.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Note this uses jQueryUI datepicker in D8. This is deprecated in D9. See https://www.drupal.org/node/3081864

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

D9's date input does not come with jQueryUI date picker. However, the 6.0 (semantically version numbered) version of Webform does.

The end result is that in D9, there is no date picker in Safari in Drupal.

So the question is should we support this since it is not supported by core?

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: Date picker gets a lot of padding in Safari » jQuery UI (deprecated in D9) date picker gets a lot of padding in Safari
Issue summary: View changes
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: jQuery UI (deprecated in D9) date picker gets a lot of padding in Safari » jQuery UI (deprecated in D9) date picker visually broken
hussainweb’s picture

hussainweb
Primary language English
commented

@mherchel, thanks. I'll check again. It could have been jQuery UI but it was core. I didn't have any fancy modules or pickers enabled. Also, this was Chrome on Mac (latest stable release), not Safari.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

hmm... I didn't run into this module on Chrome v83 on my mac. Webform enables jQueryUI. Was this form element from webform? You should be able to inspect it and see the source of the CSS.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Also jQuery UI is in D8, if you were running that.

hussainweb’s picture

hussainweb
Primary language English
commented

I think there is some confusion here. The screenshot is not from a webform. I don't have webform running on the site anyway. It was Drupal 8.8.5 (at the time of the screenshot). The form in the screenshot is from a views exposed filter. There are very few contrib modules on the site and only a couple custom modules, none of them having much to do with the UI.

The link I mentioned in the original issue summary won't work anymore but you can still see the same form elements at this link: https://contrib.axelerant.com. It's using the vanilla bootstrap theme right now.

hussainweb’s picture

hussainweb
Primary language English
commented

BTW, I looked at the source and it does look like a jQuery UI picker. So, you're right that it's deprecated in Drupal 9. Still, this is Drupal 8.9 core as of right now.

Edit: It could be that bootstrap is enabling jQuery UI on that field. When I took the screenshot, though, I clearly remember that I enabled Olivero and uninstalled Bootstrap.

steinmb’s picture

steinmb commented
Version: 8.x-1.0-alpha2 » 8.x-1.x-dev

-1 from me. I do not think we need to support jQuery UI. I suggest we close this as, won't fix.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: jQuery UI (deprecated in D9) date picker visually broken » Olivero: jQuery UI (deprecated in D9) date picker visually broken
Project: Olivero » Drupal core
Version: 8.x-1.x-dev » 9.1.x-dev
Component: User interface » Olivero theme
Priority: Normal » Minor
Issue summary: View changes
StatusFileSize
new date-picker-jquery-ui.png30.13 KB

Just checked on this again. The table padding issue is fixed. The select elements are still oversized.

There may be a way to reset all of this using postcss-preset-env's all: initial setting. Need to experiment...

steinmb’s picture

steinmb commented

There is a critical 9.2.x issue that might be worth watching #3113400: Deprecate more jQuery UI library definitions for jQuery UI related issue. Not sure where to put it so I put it here.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Closed (outdated)

I'm fairly confident that this was fixed in the forms refactor. I can't seem to be able to generate the jQuery UI calendar now that it's deprecated though.

Closing this as outdated.