How to paint a range div without using range mode?

[berkerdemirer]

Hello,

I have two date pickers in my form, one for selecting a departure date and the other one is selecting for return date. Since I need to use two input fields and submit these values separately, I am using day picker in a single mode with numberOfMonths=2. However, by our design, if user selects both dates then I should be showing a range between the two dates.

For example, in the images, if I am checking on the return date then I should be seeing the range between the departure date.

Any ideas?

[berkerdemirer]

@gpbl any ideas?

[rodgobbi]

Hi @berkerdemirer
What props are you passing to the DayPicker?

I think for what you want, you need to use mode="range", and pass the selected and onSelect props so you explicitly control the selected date, which will show the range styles from the initial date to the end date.

[berkerdemirer]

I am currently passing selected, onSelect, and mode as single currently. But okay, if i can't do this by keeping the calendar in single then i will try to do what you suggested

[rodgobbi]

I see, yeah, by default the DayPicker will only show the range when using range mode, check if it satisfies your use case.

If not, you can try other explicit customizations like custom-selections and custom-modifiers.

[berkerdemirer]

  const handleSelect = React.useCallback(
    (range: DateRange | undefined) => {
      // When in range mode, we get a DateRange. We only take the 'from' date
      const selectedDate = range?.from;
      onSelect?.(selectedDate);
      setIsOpen(false);
    },
    [onSelect]
  );

  // Convert single date to range format for visual display
  const dateRange = React.useMemo((): DateRange | undefined => {
    // Always show the range between rangeStart and rangeEnd if either exists
    if (rangeStart || rangeEnd) {
      return {
        from: rangeStart || selected || new Date(),
        to: rangeEnd || selected || new Date(),
      };
    }
    // For single date selection, show it as a single day range
    if (selected) {
      return {
        from: selected,
        to: selected,
      };
    }
    return undefined;
  }, [rangeStart, rangeEnd, selected]);

  // Handle day click to ensure single date selection
  const handleDayClick = React.useCallback<DayEventHandler<React.MouseEvent>>(
    (day) => handleSelect({ from: day, to: day }),
    [handleSelect]
  );
  
   <Calendar
          mode="range"
          selected={dateRange}
          onDayClick={handleDayClick}
          {...calendarProps}
        />
  

This worked but i dont know if there is a better way

[rodgobbi]

@berkerdemirer
I'd recommend using the default onSelect behavior of the DayPicker that already provides the from and to date range values.

[gpbl]

@berkerdemirer, is there a reason why you couldn't use mode="range" selection here?

As @rodgobbi is suggesting, an alternative is to use modifiers to match specific days (or the range of days in between). You can "style" days matching modifiers applying your own CSS classes:

https://daypicker.dev/guides/custom-modifiers#styling-modifiers

To define range modifiers, DayPicker provides utilities like rangeIncludesDate or rangeContainsModifiers - but I'm not sure how much more difficult this way is than using mode="range" instead.

The use case of two inputs with a range selection is indeed interesting - it would be nice to add an example in our docs.

[berkerdemirer]

The use case was a bit different, I was trying to create a date selection like in https://www.omio.com/. You select the dates from different input fields but when two dates are selected then the date picker shows a range between two. Yes, in the end you have a range but the selection is not range basis.