Skip to content

Conversation

@Who-is-PS
Copy link
Member

@Who-is-PS Who-is-PS commented Dec 11, 2025

Description

Add configurable datePlaceholder and timePlaceholder props to the date-range-picker component's i18nStrings, allowing developers to customize placeholder text for date and time inputs in absolute mode.

Related links, issue #, if available: n/a

AWSUI-61514

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@Who-is-PS Who-is-PS changed the title fix: Localization of datepicker feat: Add datePlaceholder and timePlaceholder props to i18nStrings Dec 12, 2025

/**
* Placeholder text for date inputs in absolute mode.
* Should match the expected date format (e.g., "YYYY-MM-DD", "JJJJ-MM-TT" for German).
Copy link
Member

Choose a reason for hiding this comment

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

use "for example" instead of "e.g."

Copy link
Member

@gethinwebster gethinwebster left a comment

Choose a reason for hiding this comment

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

"feat:" commits end up in our release notes, so they should include the component name somewhere

@Who-is-PS Who-is-PS changed the title feat: Add datePlaceholder and timePlaceholder props to i18nStrings feat: Add datePlaceholder and timePlaceholder props to date-range-picker component's i18nStrings Dec 15, 2025
@Who-is-PS Who-is-PS force-pushed the dev-v3-philosr-localization-datepicker-v2 branch from 914bd4e to df559a5 Compare January 23, 2026 09:52
@Who-is-PS Who-is-PS force-pushed the dev-v3-philosr-localization-datepicker-v2 branch from 5f5bfa3 to 585a74e Compare January 23, 2026 10:23
@codecov
Copy link

codecov bot commented Jan 23, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.19%. Comparing base (83dc705) to head (0a51380).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4104      +/-   ##
==========================================
+ Coverage   97.18%   97.19%   +0.01%     
==========================================
  Files         884      886       +2     
  Lines       25883    26000     +117     
  Branches     9350     9420      +70     
==========================================
+ Hits        25154    25271     +117     
+ Misses        723      682      -41     
- Partials        6       47      +41     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

"i18nStrings.endMonthLabel": "نهاية الشهر",
"i18nStrings.endDateLabel": "تاريخ الانتهاء",
"i18nStrings.endTimeLabel": "وقت الانتهاء",
"i18nStrings.datePlaceholder": "YYYY-MM-DD",
Copy link
Member

Choose a reason for hiding this comment

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

Why are we using / for some and - for others, IMO it should be consistent with the i18Strings.dateConstraintText

Copy link
Member

Choose a reason for hiding this comment

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

I think there need to be two different translations: datePlaceholder and slashedDatePlaceholder, similar to how there is dateTimeConstraintText and slashedDateTimeConstraintText

(although in this specific case of ar, it also looks like dateTimeConstraintText is incorrect: it should have YYYY-MM-DD)

Copy link
Member Author

Choose a reason for hiding this comment

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

I've created a CR in the i18n package to add two new props:

  • isoDatePlaceholder (YYYY-MM-DD with dashes)
  • slashedDatePlaceholder (YYYY/MM/DD with slashes)

This follows the same pattern as dateConstraintText/isoDateConstraintText/slashedDateConstraintText.

The original datePlaceholder will remain as-is for backward compatibility. Waiting on translations from Totoro team.

@NathanZlion
Copy link
Member

NathanZlion commented Jan 23, 2026

I think I understand why now, there's a property dateInputFormat which could be slashed or iso which is not being accounted for here, so the separator is not being considered for the i18strings, I suggest you look into that and incorporate that into the i18Strings,

@Who-is-PS
Copy link
Member Author

Added isoDatePlaceholder (YYYY-MM-DD with dashes) and slashedDatePlaceholder (YYYY/MM/DD with slashes) translations to the date-range-picker component.

Totoro translations merged into main via CR-252051089.

@Who-is-PS
Copy link
Member Author

I think I understand why now, there's a property dateInputFormat which could be slashed or iso which is not being accounted for here, so the separator is not being considered for the i18strings, I suggest you look into that and incorporate that into the i18Strings,

I've added format-specific placeholder strings to address this:

  • isoDatePlaceholder for the ISO format (YYYY-MM-DD with dashes)
  • slashedDatePlaceholder for the slashed format (YYYY/MM/DD with slashes)

This follows the same pattern already established with isoDateConstraintText/slashedDateConstraintText and isoDateTimeConstraintText/slashedDateTimeConstraintText.

Regarding the Totoro translations - I've noticed some inconsistencies across locales. I'll do a thorough audit of all date-related i18n strings and update any mismatches to ensure consistency between the placeholder and constraint text formats.

Copy link
Member

@NathanZlion NathanZlion left a comment

Choose a reason for hiding this comment

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

LGTM,

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.

3 participants