Improve Calendar form field style - Issues #36933 & #33447

[cyrezdev]

Pull Request for Issues #36933 & #33447.

Summary of Changes

Improve display of datetime picker.

• Centering calendar table for better looking in some not-english language.
• Style time select fields.
• Fix footer buttons alignment.
• Improve display of time fields depending on field settings (weeknumbers, am/pm).

Testing Instructions

• Apply patch, and test any form field of type calendar.

Actual result BEFORE applying this Pull Request

Example in French

Expected result AFTER applying this Pull Request

Example in French

Rendering depending on calendar field settings:

With or without weeknumbers, am/pm and or time. And with RTL support

Legend:

1. Week numbers, time 24h
2. Week numbers, time 12h
3. Time 24h
4. Time 12h
5. No Time
6. RTL (arabic)

(1) (2)
(3) (4)
(5) (6)

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[brianteeman]

I am confused. If I understand correctly then the problem only exists in non-english languages where the text for "today" is long.
If that is correct then what is the purpose of all the screenshots you have posted in english

[cyrezdev]

I am confused. If I understand correctly then the problem only exists in non-english languages where the text for "today" is long. If that is correct then what is the purpose of all the screenshots you have posted in english

As mentionned in the description of this PR, it's not only for this point, but 3 other ones:

• To style time select fields.
• Fix footer buttons alignment.
• Improve display of time fields depending on field settings (weeknumbers, am/pm).

So the additionnal screenshots are valid to show the different possible settings for calendar form field.

It is mainly cosmetic here and to have a more flexible design ;-)

[Chaosxmk]

Looks good, fixes the main point of issue I highlighted.

[obuisard]

Looks good, fixes the main point of issue I highlighted.

@Chaosxmk, please help test the PR, we need two successful tests to get this great improvement merged into the project :-)

[drmenzelit]

I have tested this item ✅ successfully on b668fc2

Tested with English and Persian

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40761.}

[obuisard]

I have tested this item ✅ successfully on 145606e

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40761.}

[obuisard]

Viviana @drmenzelit, can you put your results in the issue tracker once more? I am sorry, the branch update invalidated your results. Thanks!

[obuisard]

Great job Cyril @cyrezdev, much needed improvements and now we have a decent calendar field :-)

[laoneo]

Thanks! Also for the fast tests...

[cyrezdev]

Great job Cyril @cyrezdev, much needed improvements and now we have a decent calendar field :-)

Thank you Olivier!

[cyrezdev]

Hello here!

This PR has introduced an issue with no possibility to set Time with calendar picker, if the week numbers are hidden and the time format is 24h.

Here a quick PR with the patch: #42185

Thank you for testing! 👍