[bug]: datepicker get a wrong css

[jizhi0v0]

Describe the bug

Not displayed as expected

Affected component/components

Date Picker

How to reproduce

1.Click on datepicker component

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Browsers

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[plutack]

I have been battling this for the past 12hrs no cap. Since I am not very familiar with shadcn and react components, I was under the assumption I am doing something wrong.
I am also getting some errors after installing calendar.
Caption does not seem to exist in type partial < classnames > . I can't also seem to find it any where after navigating through the UI types where something like caption _label can be found.
Same thing for iconLeft which is suppose to exist in partial < customComponents >

[activemonkeys]

Did you install the new react-day-picker v9.0.0? That one seems to come with several breaking changes. When using react-day-picker 8.10.1 you will probably be fine for the moment.

[plutack]

@activemonkeys I will try that now. I have v9 installed

Edit : works for me too.. big thanks

[jizhi0v0]

Did you install the new react-day-picker v9.0.0? That one seems to come with several breaking changes. When using react-day-picker 8.10.1 you will probably be fine for the moment.

It works,Thank you so much!

[jizhi0v0]

I have been battling this for the past 12hrs no cap. Since I am not very familiar with shadcn and react components, I was under the assumption I am doing something wrong. I am also getting some errors after installing calendar. Caption does not seem to exist in type partial < classnames > . I can't also seem to find it any where after navigating through the UI types where something like caption _label can be found. Same thing for iconLeft which is suppose to exist in partial < customComponents >

You should run the below command

npm i [email protected]

[firdoesdev]

Did you install the new react-day-picker v9.0.0? That one seems to come with several breaking changes. When using react-day-picker 8.10.1 you will probably be fine for the moment.

Thank You! it's work 👍

[masewo]

Tried to migrate the shadcn Calendar to react-date-picker 9.x.x but I gave up since I cannot find out how to attach the hover styles to the day button and not to the day cell...

Click me

import * as React from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { DayPicker } from "react-day-picker";

import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";

export type CalendarProps = React.ComponentProps<typeof DayPicker>;

function Calendar({
className,
classNames,
showOutsideDays = true,
...props
}: CalendarProps) {
return (
  <DayPicker
    showOutsideDays={showOutsideDays}
    className={cn("p-3", className)}
    classNames={{
      months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
      month: "space-y-4",
      month_caption: "flex justify-center pt-1 relative items-center",
      caption_label: "text-sm font-medium",
      nav: "space-x-1 flex items-center",
      button_previous: cn(
        buttonVariants({ variant: "outline" }),
        "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
        "absolute left-10 top-[70px] z-10",
      ),
      button_next: cn(
        buttonVariants({ variant: "outline" }),
        "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
        "absolute right-6 top-[70px] z-10",
      ),
      month_grid: "w-full border-collapse space-y-1",
      weekdays: "flex",
      weekday:
        "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
      week: "flex w-full mt-2",
      day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
      day_button: cn(
        buttonVariants({ variant: "ghost" }),
        "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
      ),
      selected:
        "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
      today: "bg-accent text-accent-foreground",
      outside: "text-muted-foreground opacity-50",
      disabled: "text-muted-foreground opacity-50",
      range_middle:
        "aria-selected:bg-accent aria-selected:text-accent-foreground",
      hidden: "invisible",
      ...classNames,
    }}
    components={{
      Chevron: (props) =>
        props.orientation === "left" ? (
          <ChevronLeft className="h-4 w-4" />
        ) : (
          <ChevronRight className="h-4 w-4" />
        ),
    }}
    {...props}
  />
);
}
Calendar.displayName = "Calendar";

export { Calendar };

Another thing I noticed is that the range is not updating after choosing an entry from the preset list.

[efgomes]

I'm using 9.0, and my calendar is like this

[Geeraldv]

Did you install the new react-day-picker v9.0.0? That one seems to come with several breaking changes. When using react-day-picker 8.10.1 you will probably be fine for the moment.

Thank You! it's work for me 👍

[kachkaev]

PRs with fixes: #4371 & #4421

[tresorama]

In meantime, if someone want to use both v8 and v9 at the same time, it's possible to have both.
shadcn can use v8 and you can use v9 when you want.

https://medium.com/weekly-webtips/how-to-install-multiple-versions-of-the-same-package-in-npm-71c29b12e253