Skip to content

[major] Time input localization support#2501

Open
Jialecl wants to merge 7 commits into
masterfrom
jialecl/time-localization
Open

[major] Time input localization support#2501
Jialecl wants to merge 7 commits into
masterfrom
jialecl/time-localization

Conversation

@Jialecl

@Jialecl Jialecl commented Jul 13, 2026

Copy link
Copy Markdown
Collaborator

Checklist
(Check off all the items before submitting)

  • Build process is done without errors. All tests pass in the /lib directory.
  • Self-reviewed the code before submitting.
  • Meets accessibility standards.
  • Added/updated documentation to /website as needed.
  • Added/updated tests as needed.

Purpose
Locale tag in HalstackProvider also supported by timeInput component

@Jialecl
Jialecl marked this pull request as ready for review July 14, 2026 11:23

const languageContext = useContext(HalstackLanguageContext);
const translatedLabels = languageContext.labels;
const formatInfo = useMemo(() => getTimeInputLocale(languageContext.locale, timeFormat), [languageContext.locale]);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to put timeFormat inside the dependency array

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

}
};

const validateTimeValue = (value: string) => {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It always returns "Invalid time format"

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed the validation expression and the regExp is built in utils based on the timeInput values.

)}
<TimeInputField disabled={disabled} error={!!error} readOnly={readOnly}>
<DxcFlex gap="var(--spacing-gap-xs)" alignItems="center" fullHeight>
{formatInfo.format === "12" && formatInfo.dayPeriodPosition === "before" && (

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When day period is at the left, the user cannot move with the keyboard arrows

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

const numberPart =
formatInfo.format === "12" ? time.split(" ")[formatInfo.dayPeriodPosition === "before" ? 1 : 0] : time;
if (numberPart) {
const [hourStr, minuteStr, secondStr] = numberPart.split(":");

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be numberPart.split(formatInfo.separator) instead of ":"

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

@Jialecl Jialecl changed the title [minor] Time input localization support [major] Time input localization support Jul 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants