Fix: time format issue in datepicker mask #16922

vasu1303 · 2026-01-03T19:29:12Z

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:

TimeMask.ts - Added getTimeMask() to return appropriate mask pattern based on time format
TimeBlocks.ts - Restored as constant file per linting requirements
getTimeBlocks.ts (new) - Dynamic block generator supporting 12H (1-12 + AM/PM) and 24H (0-23)
DateTimeBlocks.ts - Simplified to static constant
getDateTimeMask.ts - Updated to accept and use timeFormat parameter
DateTimePickerInput.tsx - Dynamically generates mask and blocks based on user's time format preference, increased input width to accommodate AM/PM
useParseJSDateToIMaskDateTimeInputString.ts - Formats dates with correct time pattern
useParseDateTimeInputStringToJSDate.ts - Parses dates with correct time pattern
date-utils.ts - Added getTimePattern() helper (returns 'hh:mm a' for 12H, 'HH:mm' for 24H)
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 · 2026-01-03T19:30:08Z

Welcome!

Hello there, congrats on your first PR! We're excited to have you contributing to this project.
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.

Generated by 🚫 dangerJS against 18e42ee

packages/twenty-front/src/modules/localization/hooks/useDateTimeFormat.ts

packages/twenty-front/src/modules/localization/utils/resolveTimeFormat.ts

packages/twenty-front/src/utils/date-utils.ts

packages/twenty-front/src/modules/ui/input/components/internal/date/utils/getDateTimeMask.ts

charlesBochet · 2026-01-06T13:20:22Z

@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 · 2026-01-14T09:34:38Z

/twenty pr open

github-actions · 2026-01-14T09:45:52Z

🚀 Preview Environment Ready!

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

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

vasu1303 · 2026-01-14T10:00:52Z

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 · 2026-01-21T10:01:02Z

@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 · 2026-01-21T10:01:11Z

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

- Adds resolveDateFormat for consistency - Passes props as objects

lucasbordeau · 2026-01-21T10:12:37Z

.../modules/ui/input/components/internal/date/hooks/useParseJSDateToIMaskDateTimeInputString.ts

  const parseJSDateToDateTimeInputString = (date: Date) => {
-    const parsingFormat =
-      getDateTimeFormatStringFoDatePickerInputMask(dateFormat);
+    if (!date || !isValid(date)) {


I wouldn't bring validation with the Date object, as we're trying to avoid its usage. Prefer using Temporal.

sentry · 2026-01-21T10:15:26Z

packages/twenty-front/src/modules/ui/input/components/internal/date/utils/getTimeBlocks.ts

+      from: isHour12 ? 1 : 0,
+      to: isHour12 ? 12 : 23,
+      maxLength: 2,
+    },


Bug: The time input's AM/PM validation is case-sensitive, expecting AM/PM. However, date-fns formats time with lowercase am/pm, causing a mismatch and validation failure.
_{Severity: MEDIUM}

Suggested Fix

To fix the case-sensitivity issue, either update the IMask.MaskedEnum to include lowercase variants ['AM', 'PM', 'am', 'pm'], or add a prepare hook to the 'aa' block definition in getTimeBlocks.ts to convert the input value to uppercase before validation, like prepare: (str) => str.toUpperCase().

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not valid. Location: packages/twenty-front/src/modules/ui/input/components/internal/date/utils/getTimeBlocks.ts#L13 Potential issue: In 12-hour time format, the `IMask.MaskedEnum` for the AM/PM selector is configured with `['AM', 'PM']`, making it case-sensitive. However, the `date-fns` formatting pattern `'hh:mm a'` produces lowercase "am" and "pm". When a date is programmatically set, the formatted value (e.g., "03:30 pm") will not match the mask's enum, causing validation to fail. This also affects users who manually type "am" or "pm" in lowercase. The component lacks a `prepare` hook or other normalization to handle case differences.

_{Did we get this right? 👍 / 👎 to inform future reviews.}

charlesBochet reviewed Jan 6, 2026

View reviewed changes

packages/twenty-front/src/modules/localization/hooks/useDateTimeFormat.ts Show resolved Hide resolved

charlesBochet reviewed Jan 6, 2026

View reviewed changes

packages/twenty-front/src/modules/localization/utils/resolveTimeFormat.ts Show resolved Hide resolved

charlesBochet reviewed Jan 6, 2026

View reviewed changes

packages/twenty-front/src/utils/date-utils.ts Outdated Show resolved Hide resolved

charlesBochet reviewed Jan 6, 2026

View reviewed changes

packages/twenty-front/src/modules/ui/input/components/internal/date/utils/getDateTimeMask.ts Outdated Show resolved Hide resolved

charlesBochet closed this Jan 6, 2026

twenty-eng-sync bot reopened this Jan 6, 2026

charlesBochet closed this Jan 6, 2026

twenty-eng-sync bot reopened this Jan 14, 2026

prastoin marked this pull request as ready for review January 14, 2026 10:19

prastoin assigned charlesBochet Jan 14, 2026

prastoin added the -PR: awaiting review label Jan 14, 2026

greptile-apps bot reviewed Jan 14, 2026

View reviewed changes

cubic-dev-ai bot reviewed Jan 14, 2026

View reviewed changes

lucasbordeau self-requested a review January 21, 2026 09:11

cubic-dev-ai bot reviewed Jan 21, 2026

View reviewed changes

vasu1303 added 6 commits January 21, 2026 11:04

fix: time format issue in datepicker mask

4ab4284

fix: format and type

0166f78

fix: Resolves comments

9d9ab80

- Adds resolveDateFormat for consistency - Passes props as objects

chore: removes local optimization

9ecda5e

chore: removes local optimization

39f9644

fix: lint

18e42ee

lucasbordeau force-pushed the vasu/fix/time-format-issue-datepicker branch from f697442 to 18e42ee Compare January 21, 2026 10:11

lucasbordeau reviewed Jan 21, 2026

View reviewed changes

sentry bot reviewed Jan 21, 2026

View reviewed changes

Fix: time format issue in datepicker mask #16922

Are you sure you want to change the base?

Fix: time format issue in datepicker mask #16922

Uh oh!

Conversation

vasu1303 commented Jan 3, 2026

Summary

Screenshots

Implementation Details

Changes Made:

Technical Approach:

Uh oh!

github-actions bot commented Jan 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Welcome!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

charlesBochet commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vasu1303 commented Jan 14, 2026

Uh oh!

github-actions bot commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vasu1303 commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

lucasbordeau commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lucasbordeau commented Jan 21, 2026

Uh oh!

lucasbordeau Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

sentry bot Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions bot commented Jan 3, 2026 •

edited

Loading

charlesBochet commented Jan 6, 2026 •

edited

Loading

github-actions bot commented Jan 14, 2026 •

edited

Loading

vasu1303 commented Jan 14, 2026 •

edited

Loading

lucasbordeau commented Jan 21, 2026 •

edited

Loading