Skip to content

feat: customizable start/end labels for range time input - #6325 - #90

Open
balajis-qb wants to merge 1 commit into
mainfrom
feat/6280-range-time-input-labels
Open

balajis-qb wants to merge 1 commit into
mainfrom
feat/6280-range-time-input-labels

Conversation

@balajis-qb

Copy link
Copy Markdown
Collaborator

Summary

Fixes Hacker0x01#6280.

When selectsRange is combined with showTimeInput, the calendar renders two time inputs and hardcodes English (Start) / (End) suffixes onto timeInputLabel (calendar.tsx), with no way to override or translate them — a gap for non-English apps.

This adds two optional props:

Prop Effect
timeInputStartLabel When set, replaces the entire caption of the start time input
timeInputEndLabel When set, replaces the entire caption of the end time input

When a prop is not set, the existing "<timeInputLabel> (Start)" / " (End)" behaviour is unchanged. Single (non-range) showTimeInput mode is unaffected.

<DatePicker
  selectsRange
  showTimeInput
  timeInputStartLabel="Startzeit"
  timeInputEndLabel="Endzeit"
  /* ... */
/>

Changes

  • src/calendar.tsx — declare timeInputStartLabel / timeInputEndLabel on CalendarProps (they flow to DatePickerProps automatically); use them in renderInputTimeSection.
  • src/test/datepicker_test.test.tsx — 6 tests: default suffixes, back-compat with timeInputLabel, full-caption replacement, precedence over timeInputLabel, per-side fallback, single-mode unaffected.
  • docs-site/ — new "Input Time with Range (custom start/end labels)" example.

Screenshots

Default Mode
image

Override Lables
image

Contribution checklist

  • I have followed the contributing guidelines.
  • I have added sufficient test coverage for my changes.
  • I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

When `selectsRange` is combined with `showTimeInput`, the two time inputs
had hardcoded "(Start)" / "(End)" suffixes appended to
`timeInputLabel`, with no way to override them.

Add `timeInputStartLabel` and `timeInputEndLabel` props. When provided,
each replaces the corresponding caption entirely; otherwise the existing
`"<timeInputLabel> (Start/End)"` behavior is unchanged. Single (non-range)
mode is unaffected.

Includes a docs-site example and tests covering default behaviour,
per-side fallback, and precedence over `timeInputLabel`.

Fixes Hacker0x01#6280
@balajis-qb
balajis-qb force-pushed the feat/6280-range-time-input-labels branch from 4cad0b8 to cc108fb Compare September 4, 2026 07:03
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.

Custom labels support for (Start) and (End) suffixes in range mode with time input

1 participant