Skip to content

feat(forms): translatable DatePicker, DateInput and Calendar labels - #623

Merged
josemarluedke merged 2 commits into
josemarluedke:mainfrom
MichalBryxi:feat/date-picker-labels
Oct 16, 2026
Merged

josemarluedke merged 2 commits into
josemarluedke:mainfrom
MichalBryxi:feat/date-picker-labels

Conversation

@MichalBryxi

Copy link
Copy Markdown
Contributor

Closes #622.

DatePicker, DateInput and Calendar hard-coded the English text that Intl and @segmentLabels don't cover, so a translated date field still announced "Choose date", "Clear" and "Next month". This adds @labels to all three, the same shape as Pagination's (#619): override any of the texts below, and whatever you leave out keeps today's default. Nothing changes for existing users.

Key Default Where On
previousMonth Previous month previous button aria-label Calendar, DatePicker
nextMonth Next month next button aria-label Calendar, DatePicker
month Month month <select> aria-label (@captionLayout="dropdown") Calendar, DatePicker
year Year year grid aria-label (@captionLayout="dropdown") Calendar, DatePicker
clear Clear clear button's accessible name (@isClearable) DateInput, DatePicker
chooseDate (label) => label ? `Choose date, ${label}` : 'Choose date' calendar button aria-label (segmented field) DatePicker

chooseDate is a function of the field's @label because some languages put it elsewhere in the sentence. DatePicker hands @labels to its calendar as it is, and passes it in the :calendar block's args, so a custom calendar can use it too. The types are exported as CalendarLabels, DateInputLabels and DatePickerLabels.

<DatePicker @label="Začátek" @locale="cs-CZ" @labels={{hash clear="Vymazat" chooseDate=this.chooseDate nextMonth="Další měsíc"}} />

Changes

  • Calendar: CalendarLabels with the English defaults, merged with @labels and passed to the header and the year grid, which read their aria-labels from it.
  • DateInput: DateInputLabels (clear).
  • DatePicker: DatePickerLabels (CalendarLabels plus clear and chooseDate). The end content gets the finished strings rather than building "Choose date, " + label itself. DatePickerCalendarArgs gains labels.
  • Docs: a "Labels" section with a Czech demo for each of the three; the DatePicker accessibility table names the new keys.
  • Tests:
    • Calendar: every label overridden; a partial override, with the rest keeping their defaults.
    • DateInput: clear overridden; the default.
    • DatePicker: every label overridden, checked on the field and in the opened calendar; the defaults; labels reaching a :calendar block.

Checks

  • test-app: 2245 passed, 0 failed (3 skipped)
  • eslint, prettier --check and ember-tsc --noEmit (frontile) pass.
  • lint:hbs, test-app's lint:types and lint:anatomy fail identically on main (90 template-lint errors; TS 6's baseUrl deprecation; the same 8 date-input/date-picker anatomy findings). Nothing new from this branch.

🤖 Generated with Claude Code

The date components' own text was hard-coded English: the clear button,
the calendar button ("Choose date, <label>"), and the calendar's
previous/next buttons, month select and year grid. `@labels` overrides
any of them; whatever is left out keeps today's default, so nothing
changes for existing users.

- Calendar: `previousMonth`, `nextMonth`, `month`, `year`.
- DateInput: `clear`.
- DatePicker: `clear`, `chooseDate` and the calendar's four, handed on to
  its calendar and to a `:calendar` block. `chooseDate` is a function of
  the field's `@label`, since some languages put it elsewhere in the
  sentence.

The segments' names stay `@segmentLabels`.

Closes josemarluedke#622

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@netlify

netlify Bot commented Oct 15, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for frontile-next ready!

Name Link
🔨 Latest commit 3b60072
🔍 Latest deploy log https://app.netlify.com/projects/frontile-next/deploys/6ad09ab95b72dbdcc6335f40
😎 Deploy Preview https://deploy-preview-623--frontile-next.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

It is 33 lines, over the 30-line limit the site's code-block policy test
enforces for preview fences.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@josemarluedke josemarluedke added the Type: Enhancement New feature or request label Oct 16, 2026
@josemarluedke
josemarluedke merged commit ae3a783 into josemarluedke:main Oct 16, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Type: Enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DatePicker, DateInput and Calendar: their text can't be translated

2 participants