Date titles

[PMLP-novo]

Is your feature request related to a problem? Please describe.
I want to communicate to my users why a day is highlighted or not highlighted

Describe the solution you'd like
I would love to be able to give a dateTitle function that can generate a title for each day where it is relevant. Such that the users easily can hover and see extra info.

() => {
  const [startDate, setStartDate] = useState(new Date());
  const highlightDates=[subDays(new Date(), 7), addDays(new Date(), 7)] 
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      highlightDates={highlightDates}
      dateTitle={(date)=>highlightDates.includes(date)?"Business logic"// Write some business logic telling the users why the specify day is highlighted
:null}
    />
  );
};

[shreekeshmurkar]

@PMLP-novo
Why can't this be solved using renderDayContents property ?
Try following code.

() => {
  const [startDate, setStartDate] = useState(new Date());
  const highlightDates= [subDays(new Date(), 7), addDays(new Date(), 7)];
  const highlightedDays = highlightDates.map(d => d.getDate()); 
 
  const renderDayContents = (day, date) => {
    const tooltipText = "Business logic";
    if (highlightedDays.includes(day)) {
        return <span title={tooltipText}>{getDate(date)}</span>;
    } else {
       return <span>{getDate(date)}</span>;
    }
    
  };
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      highlightDates={highlightDates}
      renderDayContents={renderDayContents}
    />
  );
};

[jees47]

is getDate inbuild function?, if not can you show me how its done also

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions]

This issue was closed because it has been stalled for 10 days with no activity.