Calendar: added day, month and year information to date cells #7650

acc-cassio · 2025-01-26T15:21:52Z

Adds the information about the day, month and year to each date cell. This information is quite useful for the following implementation, in which the dates between the start and end dates are highlighted during selection for the range mode of the calendar. I can imagine this information might also be useful for other implementations.

I saw a feature request on this exact implementation but can't find it right now. I will link it if I find it again.

Feature also discussed on StackOverFlow: https://stackoverflow.com/questions/79061108/highlight-days-in-primereact-calendar-based-on-range-selection-with-hover

import React, {useState, useRef} from 'react';
import {Calendar} from 'primereact/calendar';

export default function DateRangeSelector() {
  const [selectedDates, setSelectedDates] = useState<(Date | null)[]>([]);
  const [rangeStart, setRangeStart] = useState<Date | null>(null);
  const calendarRef = useRef<Calendar>(null); // Ref to the Calendar DOM

  const handleDateSelect = (selectedDates: (Date | null)[]) => {
    setSelectedDates(selectedDates); // Finalize the range

    if (!rangeStart) {
      setRangeStart(selectedDates[0]); // Set the start date
    } else {
      setRangeStart(null); // Reset start date
    }
  };

  const handleDateHover = (event: React.MouseEvent<HTMLTableCellElement>) => {
    if (!calendarRef.current) return
    if (!rangeStart || selectedDates[1]) return

    if (!(event.target instanceof HTMLTableCellElement)) return

    const hoveredDay = event.target.getAttribute('data-p-day');
    const hoveredMonth = event.target.getAttribute('data-p-month');
    const hoveredYear = event.target.getAttribute('data-p-year');

    if (hoveredDay === null || hoveredMonth === null || hoveredYear === null) return;

    const hoveredDate = new Date(parseInt(hoveredYear), parseInt(hoveredMonth), parseInt(hoveredDay));

    const minDate = rangeStart < hoveredDate ? rangeStart : hoveredDate;
    const maxDate = rangeStart > hoveredDate ? rangeStart : hoveredDate;

    // Remove existing highlights
    const element = calendarRef.current.getOverlay()
    const allCells = element.querySelectorAll('.p-datepicker-calendar td');
    allCells.forEach((cell) => cell.firstElementChild?.classList.remove('p-highlight'));

    // Highlight dates in the range
    allCells.forEach((cell) => {
      const day = cell.getAttribute('data-p-day');
      const month = cell.getAttribute('data-p-month');
      const year = cell.getAttribute('data-p-year');

      if (day === null || month === null || year === null) return;

      const cellDate = new Date(parseInt(year), parseInt(month), parseInt(day));

      if (cellDate >= minDate && cellDate <= maxDate) cell.firstElementChild?.classList.add('p-highlight');
    });
  };

  return (
    <div>
      <h3>Select Date Range</h3>
      <Calendar
        ref={calendarRef}
        value={selectedDates}
        onChange={(e) => { if (e.value) handleDateSelect(e.value) }}
        selectionMode="range" numberOfMonths={2}
        readOnlyInput
        pt={{day: { onMouseEnter: (event  ) => handleDateHover(event) }}}
      />
    </div>
  );
}

vercel · 2025-01-26T15:21:57Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Updated (UTC)
primereact	⬜️ Ignored (Inspect)	Visit Preview	Jan 26, 2025 3:37pm
primereact-v9	⬜️ Ignored (Inspect)	Visit Preview	Jan 26, 2025 3:37pm

github-actions · 2025-01-26T15:22:05Z