Render uniform WP time picker over default time input element

[MaxwellGarceau]

All Submissions:

• Does your code follow the WooCommerce Sniffs variant of WordPress coding standards?
• Have you written new tests for your changes, as applicable? Not applicable
• Have you successfully run tests with your changes locally?
• Will this change require new documentation or changes to existing documentation? Documentation for this change would live on the WooCommerce Bookings side if needed

---

Changes proposed in this Pull Request:

• Add the wc-bookings-render-wp-time-picker class to the time input on the Bookings -> Settings -> Accommodations admin menu to render a uniform time selector that follows sitewide time formats
• Update documentation regarding local setup

Closes #364.

Steps to test the changes in this Pull Request:

Warning

**‼️‼️ NOTE - BLOCKED by WC BOOKINGS PR 3926: This change relies on code introduced in https://github.com/woocommerce/woocommerce-bookings/pull/3926.

Note

There is no chance of introducing bugs if this PR is merged first.
Without the WooCommerce Bookings PR there will be no change whatsoever in appearance or functionality of the input time selector. The only code change in this PR is adding the class that the JS uses to select and initialize the time picker.**

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 /wp-admin/edit.php?post_type=wc_booking&page=wc_bookings_settings&tab=accommodation
6. You should see a time selector that adapts to the 24-hour time format
7. Change the time format back to the 12 hour AM/PM configuration. The time selector on /wp-admin/edit.php?post_type=wc_booking&page=wc_bookings_settings&tab=accommodation should adapt to display the 12 hour format

Functionality - Admin

1. Save a setting and refresh the page. The setting should persist.
2. Perform with both 12 and 24 hour configuration.

Functionality - FE

1. Set the check in and check out to a value (and remember the value) - /wp-admin/edit.php?post_type=wc_booking&page=wc_bookings_settings&tab=accommodation
2. Create an Accommodation Product

3. Navigate to the FE. You should set that the check in and check out time are the same as the value you saved.

Changelog entry

Add - Enter a summary of all changes on this Pull Request. This will appear in the changelog if accepted.

[Sourabh208]

QA Status: Need Information/Need Fixes ⚠️

1. Save a setting and refresh the page. The setting should persist. ✅
2. Perform with both 12 and 24 hour configuration. ⚠️ When a user changes the settings from 24 to 12 hours, it shows 24 hours clock. @MaxwellGarceau Can you please help if any step I missed? Please watch video 1.

Video 1:

Screen.Recording.2025-01-28.at.13.01.41.mov

Testing Environment - Local

• WordPress: 6.7.1
• Theme active on store: Twenty Twenty-Five
• WooCommerce - Version 9.6.0
• PHP: 8.2.23 
• Web Server: nginx/1.26.1
• Browser: Chrome - Version 128
• OS: macOS Sonoma 14.6.1
• woocommerce-accommodation-bookings: https://github.com/woocommerce/woocommerce-accommodation-bookings/actions/runs/13005292565

[MaxwellGarceau]

Hey @Sourabh208 thanks for the QA notes.

Possible cause of the problem

Just to confirm, are the changes from https://github.com/woocommerce/woocommerce-bookings/pull/3926 active in your testing environment?

The reason I ask is because this change uses a CSS class that was introduced in https://github.com/woocommerce/woocommerce-bookings/pull/3926 to initialize the JS time picker that transforms the default <input type="time" /> element.

Based on the testing video 1 it seems that the JS time picker isn't being applied.

Solutions

The easy way

Assuming what I said above is accurate, the easiest option would be letting https://github.com/woocommerce/woocommerce-bookings/pull/3926 go through to the development cycle first and making it into production before QA'ing this ticket.

The hard way

Another option would be manually setting up your testing environment to use branch fix/3633 in WooCommerce Bookings and building the plugin with the build steps documented in the readme. This is definitely more work. If you're testing on a remote environment you could try to SSH into the environment and upload the built fix/3633 branch or if you have access to FTP you could drag/drop it.

What do you think?