[Date range picker] First day selected of range disappears

[la-ruee-vers-le-bois]

Hi :)

When I use the date range picker and select a range, the first day selected "disappears":

screen-capture (1).webm

An idea to solve this ?

Thx for your help

[martin-dos-santos]

Hi, please can you share your code?

[la-ruee-vers-le-bois]

Hi :)

Yes of course:

'use client';
import * as React from 'react';
import { Button } from '@/components/UI/button';
import { addDays, format } from 'date-fns';
import { DateRange } from 'react-day-picker';
import { fr } from 'date-fns/locale';
import { Calendar as CalendarIcon } from 'lucide-react';
import { Calendar } from '@/components/UI/calendar';
import { cn } from '@/lib/utils';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/UI/popover';

export default function DateRangeCalendar(props) {
  const [date, setDate] = React.useState({
    from: props.dateFrom,
    to: props.dateTo,
  });

  return (
    <div className='grid gap-2'>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            id='date'
            variant={'outline'}
            className={cn(
              'w-[300px] justify-start text-left font-normal',
              !date && 'text-muted-foreground'
            )}>
            <CalendarIcon className='mr-2 h-4 w-4' />
            {date?.from ? (
              date.to ? (
                <>
                  Du{' '}
                  {format(date.from, 'dd LLL y', {
                    locale: fr,
                  })}{' '}
                  au{' '}
                  {format(date.to, 'dd LLL y', {
                    locale: fr,
                  })}
                </>
              ) : (
                format(date.from, 'dd LLL y', {
                  locale: fr,
                })
              )
            ) : (
              <span>Choisir un créneau</span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className='w-auto p-0' align='start'>
          <Calendar
            initialFocus
            mode='range'
            defaultMonth={date?.from}
            selected={date}
            onSelect={setDate}
            numberOfMonths={2}
            locale={fr}
          />
        </PopoverContent>
      </Popover>
    </div>
  );
}
`

[chrisjh]

You might have already found a solution here but here's what I did to solve the same issue.

In your /components/ui/calendar.tsx file, add the following to the classNames prop:

day_range_start:
  "aria-selected:bg-primary aria-selected:text-primary-foreground",
day_range_end:
  "aria-selected:bg-primary aria-selected:text-primary-foreground",

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.