Skip to content

feat: add formatDateDisplay prop for custom date formatting#6281

Closed
pataar wants to merge 1 commit intoHacker0x01:mainfrom
pataar:feat/function-date-format
Closed

feat: add formatDateDisplay prop for custom date formatting#6281
pataar wants to merge 1 commit intoHacker0x01:mainfrom
pataar:feat/function-date-format

Conversation

@pataar
Copy link
Copy Markdown

@pataar pataar commented Apr 10, 2026

Summary

  • Adds a new formatDateDisplay prop that accepts (date: Date) => string for custom input display formatting
  • Unlike overloading dateFormat, this preserves typed input parsing — dateFormat still handles parsing while formatDateDisplay only controls the displayed value
  • Works with single dates, date ranges, multiple dates, and the formatMultipleDates callback
  • Includes docs-site example demonstrating Intl.DateTimeFormat usage

Example usage

const formatter = new Intl.DateTimeFormat(undefined, {
  weekday: "short",
  year: "numeric",
  month: "long",
  day: "numeric",
});

<DatePicker
  formatDateDisplay={(date) => formatter.format(date)}
  selected={selectedDate}
  onChange={setSelectedDate}
/>

Test plan

  • Unit tests for safeMultipleDatesFormat with formatDateDisplay
  • Integration tests for single date, range, and partial range with formatDateDisplay
  • Integration test verifying typed input parsing still works when formatDateDisplay is set
  • Integration tests for formatMultipleDates callback with formatDateDisplay
  • Full test suite passes (1495 tests)
  • TypeScript type-check passes
  • ESLint + Stylelint + Prettier pass

@pataar pataar marked this pull request as draft April 11, 2026 06:59
Adds a new `formatDateDisplay` prop that accepts `(date: Date) => string`
for custom input display formatting (e.g. Intl.DateTimeFormat).

Unlike overloading `dateFormat`, this approach preserves the existing
parsing behavior — `dateFormat` continues to handle typed input parsing
while `formatDateDisplay` only controls the displayed value.

Works with single dates, date ranges, multiple dates, and the
`formatMultipleDates` callback.
@pataar pataar force-pushed the feat/function-date-format branch from 034da7f to f9e7364 Compare April 12, 2026 07:31
@pataar pataar changed the title feat: allow function for dateFormat prop feat: add formatDateDisplay prop for custom date formatting Apr 12, 2026
@pataar pataar closed this Apr 12, 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.

1 participant