Accommodation Booking Setting doesn't follow WP Time format Setting

[ankitguptaindia]

Bug Description:

When the WordPress General Setting is configured to use a 24-hour time format, the Accommodation Booking Setting still displays the time in the AM/PM format.

We have fixed the same issue in the Booking extension. WOuld be great if fix here on this extension as well.

WP Setting	Accommodation Setting	Booking FE

Steps to Reproduce:

1. Access the WordPress admin panel.
2. Navigate to the "General" settings under "Settings" in the WordPress dashboard.
3. In the "Time format" section, select the 24-hour time format (e.g., "20:00" for 8:00 PM).
4. Save the changes.
5. Navigate to the Accommodation Booking Setting within the plugin.

Expected Result:

The time format displayed in the Accommodation Booking Setting should follow the 24-hour time format consistent with the WordPress general setting.

Actual Result:

The Accommodation Booking Setting continues to display the time in the AM/PM format, even though the WordPress general setting is configured for the 24-hour time format.

[MaxwellGarceau]

Research

The <input type="time" /> component is designed to pick up the users local machine's time display preferences.
https://stackoverflow.com/questions/13523060/how-to-change-the-time-format-12-24-hours-of-an-input#answer-13523302

However, the implementation is somewhat bugged. Primarily, it's the browser's locale and not the system's locale that determines how the input will display the clock. This can lead to bugs where the browser locale, for some reason, is different than the system.

In addition, there's no way to customize the manually with an attribute.

As an example, when I change my time to 24 hour display the stack overflow displays in 24 hour time immediately. However, wp-env required me to restart Google Chrome before the change took effect.

Stackoverflow

wp-env

12 Hour

24 hour

Solutions

• Skip this ticket as the time format already follows a user selected format (just not the WP time settings)
• Replace the includes/admin/class-wc-accommodation-booking-admin-product-settings::generate_accommodation_time_html callback with a callback that provides a custom timepicker that can be manually set to display in 12 hour or 24 hour time depending on WP settings. Edit: A proposed solution for this can be found on the related issue https://github.com/woocommerce/woocommerce-bookings/issues/3633#issuecomment-1679941511.

[MaxwellGarceau]

@jeffpaul since this issue isn't strictly a bug, I wanted to get your thoughts regarding solutions for this ticket based on my comment above. I've proposed two possible solutions.

[MaxwellGarceau]

Note: Use https://github.com/woocommerce/woocommerce-bookings/pull/3926 as a template for resolving this issue as well

[MaxwellGarceau]

Warning

‼️‼️ #489 is blocked by https://github.com/woocommerce/woocommerce-bookings/pull/3926.

Note

There is no chance of introducing bugs if #489 is merged first.
The only change in #489 is adding a class to the time select input to initialize the WP time picker react component render function.