Fix: time format issue in datepicker mask

[vasu1303]

Fixes: #16872

Summary

Fixes the DateTimePicker to respect user's 12H/24H time format preference. Previously, the time display at the top of the DateTimePicker always showed 24-hour format (e.g., "14:30") regardless of the user's time format setting.

Screenshots

After: Time respects user preference, showing 12H with AM/PM (e.g., "03:28 PM") or 24H format

Implementation Details

Changes Made:

1. TimeMask.ts - Added getTimeMask() to return appropriate mask pattern based on time format
2. TimeBlocks.ts - Restored as constant file per linting requirements
3. getTimeBlocks.ts (new) - Dynamic block generator supporting 12H (1-12 + AM/PM) and 24H (0-23)
4. DateTimeBlocks.ts - Simplified to static constant
5. getDateTimeMask.ts - Updated to accept and use timeFormat parameter
6. DateTimePickerInput.tsx - Dynamically generates mask and blocks based on user's time format preference, increased input width to accommodate AM/PM
7. useParseJSDateToIMaskDateTimeInputString.ts - Formats dates with correct time pattern
8. useParseDateTimeInputStringToJSDate.ts - Parses dates with correct time pattern
9. date-utils.ts - Added getTimePattern() helper (returns 'hh:mm a' for 12H, 'HH:mm' for 24H)
10. parseDateTimeToString.ts - Added optional timeFormat parameter for consistency

Technical Approach:

• Leverages existing useDateTimeFormat() hook to get user's timeFormat preference
• Supports TimeFormat.SYSTEM, TimeFormat.HOUR_12, and TimeFormat.HOUR_24
• Uses IMask blocks with appropriate ranges: 1-12 for 12H, 0-23 for 24H
• Adds 'aa' (AM/PM) block for 12-hour format with enum validation

[github-actions]

	Fails
🚫	node failed.

Log

Details

�[31mError: �[39m SyntaxError: Unexpected token 'C', "Contributo"... is not valid JSON
    at JSON.parse (<anonymous>)
�[90m    at parseJSONFromBytes (node:internal/deps/undici/undici:4259:19)�[39m
�[90m    at successSteps (node:internal/deps/undici/undici:6882:27)�[39m
�[90m    at readAllBytes (node:internal/deps/undici/undici:5807:13)�[39m
�[90m    at process.processTicksAndRejections (node:internal/process/task_queues:103:5)�[39m
danger-results://tmp/danger-results-75a507d1.json

Generated by 🚫 dangerJS against 22aaa2f

[charlesBochet]

@vasu1303 Thanks for opening this PR—much appreciated.

We only accept PRs with passing (green) tests. Since the overall direction looks good, I’ve added a few comments to help guide you.

I’m going to close this PR for now because the tests are failing, but feel free to reopen it if you have the bandwidth to continue working on it. We’ll be happy to keep reviewing it.

To reopen the PR, you can comment:
"/twenty pr open"

[vasu1303]

/twenty pr open

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:55480

This environment will automatically shut down when the PR is closed or after 5 hours.

[vasu1303]

Hi @charlesBochet, sorry for the delay in getting back to this! I have now addressed all the feedback: I unified the date and time resolution using utilities and refactored the components to pass { dateFormat, timeFormat } as an object to improve the DevXP. I've also made sure the tests are passing.

Let me know if this looks good!

[greptile-apps]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[cubic-dev-ai]

No issues found across 10 files

[cubic-dev-ai]

No issues found across 1930 files

Note: This PR contains a large number of files. cubic only reviews up to 75 files per PR, so some files may not have been reviewed.

[lucasbordeau]

@vasu1303 Nice work.

After testing this, there's a small UX problem.

The AM or PM shouldn't reset until we delete it, right now it is deleted if we change the time part, which forces a user to put back AM or PM each time he changes the time part.

The input has been developed to not destroy any other part when modifying only a part of the date time input text.

You can find the right lifecycle with the mask and the input to avoid this annoying effect.

[lucasbordeau]

Enregistrement.de.l.ecran.2026-01-21.a.10.58.06.mov

[lucasbordeau]

Hi @vasu1303 nice work. I've decided to preserve the input instead of forcing the enum, since the final validation is still here, it's less painful to be able to enter a wrong first character than to lose the AM/PM part every time we change another block.

[twenty-eng-sync]

Hey @lucasbordeau! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!

[twenty-eng-sync]

Hey @lucasbordeau! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!

[vasu1303]

Hi @lucasbordeau, thank you for the appreciation and you taking the time out to fix that UX issue. Sorry I couldn't circle back sooner due to a busy streak on my end, but I'm glad to see it merged. Thanks!