React-dates技术问询：点击结束日期输入框显示对应月份

Absolutely! This is a common usability pain point with React-dates' default behavior, but there are straightforward ways to adjust it. Here are two reliable approaches to make the end date calendar jump directly to the relevant month when clicked:

1. Use Controlled visibleMonth with onFocusChange #

This is the most flexible method, as it gives you full control over which month the calendar displays based on user interaction.

How it works: #

• Track the currently focused input (start/end date) and the visible month in your component state.
• When the user focuses the end date input, if an end date is already selected, immediately switch the visible month to the end date's month.

Code Example: #

import { DateRangePicker } from 'react-dates';
import { useState } from 'react';
import moment from 'moment';

function ImprovedDateRangePicker() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusedInput] = useState(null);
  const [visibleMonth, setVisibleMonth] = useState(null);

  const handleFocusChange = (newFocusedInput) => {
    setFocusedInput(newFocusedInput);
    
    // Adjust visible month when focusing end date
    if (newFocusedInput === 'endDate') {
      if (endDate) {
        // Jump to the month of the selected end date
        setVisibleMonth(moment(endDate).startOf('month'));
      } else {
        // Fallback: Show current month if no end date is selected
        setVisibleMonth(moment().startOf('month'));
      }
    } else if (newFocusedInput === 'startDate' && startDate) {
      // Optional: Keep start date's month when focusing start input
      setVisibleMonth(moment(startDate).startOf('month'));
    }
  };

  return (
    <DateRangePicker
      startDate={startDate}
      startDateId="start-date-input"
      endDate={endDate}
      endDateId="end-date-input"
      onDatesChange={({ startDate, endDate }) => {
        setStartDate(startDate);
        setEndDate(endDate);
      }}
      focusedInput={focusedInput}
      onFocusChange={handleFocusChange}
      visibleMonth={visibleMonth}
      onVisibleMonthChange={(month) => setVisibleMonth(month)}
      // Add any other props you need (e.g., numberOfMonths, isOutsideRange)
    />
  );
}

Key Notes: #

• This relies on React-dates' visibleMonth (controlled prop) and onVisibleMonthChange callback, which are available in most recent versions of the library. If you're on an older version, you may need to upgrade.
• Adjust the fallback logic (when no end date is selected) to match your app's needs—you could show the start date's month instead of the current month if that makes more sense for your users.

2. Quick Hack with initialVisibleMonth (Uncontrolled) #

If you prefer an uncontrolled approach, you can dynamically set the initialVisibleMonth prop based on the focused input and selected dates.

Code Snippet: #

<DateRangePicker
  // ... other props
  focusedInput={focusedInput}
  initialVisibleMonth={() => {
    if (focusedInput === 'endDate' && endDate) {
      return moment(endDate).startOf('month');
    }
    // Default to start date month or current month
    return startDate ? moment(startDate).startOf('month') : moment();
  }}
/>

Caveat: #

This method works but is less reliable than the controlled approach, as initialVisibleMonth only sets the initial month when the calendar first opens. If the user navigates away and refocuses, it might not update as expected.

Hope these solutions help you smooth out that frustrating user experience! Feel free to tweak the logic to fit your specific use case.

内容的提问来源于stack exchange，提问作者BRS