Skip to content

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

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

feat: customizable start/end labels for range time input#6325
balajis-qb wants to merge 1 commit into
Hacker0x01:mainfrom
qburst:feat/6280-range-time-input-labels

Conversation

@balajis-qb

Copy link
Copy Markdown
Contributor

Summary

Fixes #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.

@codecov

codecov Bot commented Sep 4, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.32%. Comparing base (548a1f3) to head (cc108fb).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6325      +/-   ##
==========================================
+ Coverage   99.29%   99.32%   +0.02%     
==========================================
  Files          30       30              
  Lines        3822     3824       +2     
  Branches     1648     1650       +2     
==========================================
+ Hits         3795     3798       +3     
+ Misses         26       25       -1     
  Partials        1        1              

☔ View full report in Codecov by Harness.
📢 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.

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
@balajis-qb

Copy link
Copy Markdown
Contributor Author

Hi @martijnrusschen, Can you review this PR and let me know if any changes required. Thank you.

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