[wp-trac] [WordPress Trac] #55577: Wrong Date Format on jQuery UI datepicker on the public side of Jetpack forms for Localized sites

[WordPress Trac]

#55577: Wrong Date Format on jQuery UI datepicker on the public side of Jetpack
forms for Localized sites
------------------------------+-----------------------------
 Reporter:  miguelsansegundo  |      Owner:  (none)
     Type:  defect (bug)      |     Status:  new
 Priority:  normal            |  Milestone:  Awaiting Review
Component:  I18N              |    Version:
 Severity:  normal            |   Keywords:
  Focuses:  ui                |
------------------------------+-----------------------------
 There is an issue on the public side showing the wrong date format for
 escaped literal text such as `\d\e` in the date format `j \d\e F \d\e Y`
 when internationalizing the input value of the jQuery UI datepicker. Which
 is used by [https://jetpack.com/support/jetpack-blocks/contact-form/
 Jetpack forms].

 The literal text `de` is common in the date format of Spain and Portugal.
 For instance in `15 de Abril de 2022`.

 Here is a [https://user-
 images.githubusercontent.com/1881481/163436224-437e1d50-161a-4c50-93ef-
 b0f5dc8ff6ae.png screenshot] of the issue showing the wrong format on the
 datepicker input on the public side.

 As you can see, the issue doesn't affect the dates rendered via PHP
 because the backward slashes are the correct format in that case.

 The issue doesn't affect the [https://user-
 images.githubusercontent.com/1881481/163449525-abda00c7-7895-48e8-8879-4865c3f1eaf5.png
 settings] either. Only affects the jQuery UI datepicker on the public
 side.

 The issue happens because we use **backward slashes** to
 [https://wordpress.org/support/article/formatting-date-and-time/#escaping
 escape literal text when formatting custom dates in WordPress] but the
 datepicker of jQuery UI only accepts **single quotes** to **scape literal
 text in the date format**. It seems that in the past
 [https://stackoverflow.com/a/4760345 both syntaxes were supported] but
 nowadays with the latest versions
 [https://jsfiddle.net/miksansegundo/f3v0odh5/3/ the backward slashes don't
 work].

 The `dateFormat` together with other localizations for the datepicker of
 jQuery UI is passed [https://user-
 images.githubusercontent.com/1881481/163448347-72780427-6e01-4673-b43f-
 65b0bc94e3fe.png in a script in the HTML document] thanks to the WordPress
 core function [https://github.com/WordPress/WordPress/blob/master/wp-
 includes/script-loader.php#L1817 wp_localize_jquery_ui_datepicker].

 I believe this is not the responsibility of jQuery UI, or Jetpack, but the
 WordPress core function `wp_localize_jquery_ui_datepicker` that introduces
 two bugs:

 1. Replaces `d` by `dd` when converting the PHP date format into jQuery
 UI's format **not excluding escaped literal text when it should** because
 `\d` should not be converted into `\dd`.
 2. Does not convert the PHP date format for escaped literal text `\d` with
 backward slash into the supported jQuery UI's date format, which uses
 single quotes `'de'`.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55577>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform