React日期选择器：实现悬停颜色效果与日期区间着色

Hey there! Let's tackle those missing hover and selected range highlighting effects for your React Date Picker. I've worked through similar scenarios before, so here's a step-by-step solution tailored to your setup:

To implement these two effects, we need to track three key states and add conditional styling logic for each date cell:

1. startDate: The selected start date
2. endDate: The selected end date (if any)
3. hoveredDate: The date currently under the mouse cursor

For each date cell, we'll check if it falls into either:

• The confirmed selected range (between startDate and endDate)
• The temporary hover range (between startDate and hoveredDate, only when endDate isn't set yet)

1. Update State Management #

First, add the required state variables to your Date Picker component:

import { useState } from 'react';

const DatePicker = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [hoveredDate, setHoveredDate] = useState(null);

  // ... rest of your existing code
};

2. Add Date Range Check Helpers #

Create reusable helper functions to determine if a date falls within a specific range:

// Check if a date is between start and end (inclusive)
const isDateInRange = (date, rangeStart, rangeEnd) => {
  if (!rangeStart || !rangeEnd) return false;
  const dateTime = date.getTime();
  return dateTime >= rangeStart.getTime() && dateTime <= rangeEnd.getTime();
};

// Check if a date is in the temporary hover range (after startDate is selected but before endDate)
const isDateInHoverRange = (date) => {
  if (!startDate || !hoveredDate) return false;
  // Handle cases where hovered date is before startDate
  const tempStart = startDate < hoveredDate ? startDate : hoveredDate;
  const tempEnd = startDate < hoveredDate ? hoveredDate : startDate;
  return isDateInRange(date, tempStart, tempEnd);
};

3. Update Date Cell Rendering #

Modify your date cell rendering logic to apply conditional classes based on the range checks:

// Example date cell rendering loop (adjust to match your existing structure)
{dates.map((date) => {
  const isInSelectedRange = isDateInRange(date, startDate, endDate);
  const isInHoverRange = !endDate && isDateInHoverRange(date);
  const isStart = startDate && date.getTime() === startDate.getTime();
  const isEnd = endDate && date.getTime() === endDate.getTime();

  return (
    <div
      key={date.toISOString()}
      className={`date-cell
        ${isInSelectedRange ? 'selected-range' : ''}
        ${isInHoverRange ? 'hover-range' : ''}
        ${isStart ? 'start-date' : ''}
        ${isEnd ? 'end-date' : ''}
      `}
      onClick={() => handleDateSelection(date)}
      onMouseEnter={() => setHoveredDate(date)}
      onMouseLeave={() => setHoveredDate(null)}
    >
      {date.getDate()}
    </div>
  );
})}

4. Add Range Selection Logic #

Update your date click handler to properly manage start/end date selection:

const handleDateSelection = (date) => {
  if (!startDate) {
    // First click: set start date
    setStartDate(date);
  } else if (!endDate) {
    // Second click: set end date (swap if clicked date is before start)
    date >= startDate 
      ? setEndDate(date) 
      : (setEndDate(startDate), setStartDate(date));
  } else {
    // Reset selection if clicking after a full range is selected
    setStartDate(date);
    setEndDate(null);
  }
};

5. Add Styling #

Add CSS classes to visualize the ranges (tweak colors to match your design):

.date-cell {
  padding: 8px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

/* Highlight confirmed selected range */
.selected-range {
  background-color: #e6f7ff;
}

/* Highlight temporary hover range */
.hover-range {
  background-color: #f0f8ff;
}

/* Style for start/end date anchors */
.start-date, .end-date {
  background-color: #1890ff;
  color: white;
  font-weight: 500;
}

/* Optional: Round corners for start/end dates to match Airbnb's style */
.start-date {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.end-date {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

• Use a Date Utility Library: Replace manual date comparisons with date-fns or dayjs (e.g., isWithinInterval function) to simplify code and avoid edge cases with time zones.
• Performance Tweaks: Wrap your date cell component with React.memo and use useCallback for helper functions to prevent unnecessary re-renders when state changes.
• Edge Case Handling: Add logic to reset hoveredDate when switching months, and exclude disabled dates from range checks if your picker supports disabled dates.
• Accessibility: Add aria-label attributes to date cells (e.g., aria-label="Selected start date: May 1, 2024") to improve screen reader support.

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