Add formatMultipleDates prop to customize multiple selection input label

[kykim00]

Is your feature request related to a problem? Please describe.

When using selectsMultiple, the input field displays selected dates in a fixed format that cannot be customized. Currently:

• 2 dates: "01/01/2024, 01/15/2024"
• 3+ dates: "01/01/2024 (+2)"

This format works for some use cases, but I'm frustrated when I need to:

• Display the count differently (e.g., show "01/01/2024 (+1)" even with 2 dates)
• Use a different language/format (e.g., "2024-01-01 외 2개" in Korean)
• Show only the count (e.g., "3 dates selected")
• Display all dates with a custom separator

The format is hardcoded in safeMultipleDatesFormat() and there's no way to customize it without forking the library.

Describe the solution you'd like

Add a formatMultipleDates prop that allows users to customize how multiple selected dates are displayed in the input field.

<DatePicker
  selectsMultiple
  selectedDates={dates}
  dateFormat="yyyy-MM-dd"
  formatMultipleDates={(dates, formatDate) => {
    if (dates.length === 0) return '';
    if (dates.length === 1) return formatDate(dates[0]);
    return `${formatDate(dates[0])} and ${dates.length - 1} more`;
  }}
/>

Proposed API:

formatMultipleDates?: (
  dates: Date[], 
  formatDate: (date: Date) => string
) => string;

• Parameters:
  • dates: Array of selected Date objects
  • formatDate: A function that formats a date using the dateFormat prop
• Returns: String to display in the input field
• Only applies when: selectsMultiple={true}

Describe alternatives you've considered

1. Using customInput prop:

   • ❌ Doesn't work because customInput receives an already-formatted value string
   • The formatting happens before the custom input component receives it
   • Attempting to override the value breaks DatePicker's internal state management

2. Adding configuration object instead of function:

   multipleDatesDisplay={{
     maxVisible: 1,
     separator: ', ',
     remainingFormat: '(+{count})'
   }}

   • ✅ Simpler for common cases
   • ❌ Less flexible, can't handle complex logic like date ranges or conditional formatting
   • ❌ Requires more props and validation logic

Why the function-based approach is best:

• ✅ Maximum flexibility for all use cases
• ✅ Consistent with existing customization patterns in react-datepicker (customInput, renderCustomHeader, renderDayContents)
• ✅ Type-safe with TypeScript
• ✅ Simple API (just one prop)
• ✅ Backward compatible (default behavior unchanged when prop is not provided)
• ✅ Allows for internationalization and complex logic

Additional context

This feature would be particularly useful for:

• International applications needing localized date displays
• Mobile applications where space is limited (count-only display)
• Applications with specific UX requirements for date display