React Day Picker Error
Answered
Palomino posted this in #help-forum
PalominoOP
When I am using react-day-picker and I try to style it. it duplicates the year for some reason?!
<DayPicker
mode="single"
selected={field.value ? new Date(field.value) : undefined}
onSelect={handleSelect}
disabled={{ after: maxDate }}
captionLayout="dropdown-years"
defaultMonth={new Date(1926, 1)}
endMonth={new Date(maxDate)}
classNames={{
...defaultClassNames,
root: `${defaultClassNames.root} text-slate-200`,
caption: `text-slate-200 font-semibold mb-2`,
caption_dropdowns: `flex gap-2`,
dropdown: 'bg-slate-700 text-slate-200 p-1 rounded',
day: `rounded-md transition hover:bg-slate-700/50 hover:text-slate-100`,
selected: `bg-blue-500 text-white border-blue-500`,
today: `border border-slate-600`,
disabled: `text-slate-600 cursor-not-allowed`,
outside: `text-slate-600`,
nav_button: `text-slate-400 hover:bg-slate-700 hover:text-slate-200`,
chevron: `fill-blue-400`,
}}
/>Answered by Serengeti
In v9, dropdown = year + month, so when you pass dropdown-year the component doesn't recognise it and falls back to default behaviour which is prob causing the duplication, so it's rendering both dropdown and default label
6 Replies
PalominoOP
but then when I remove the "dropdown" style. it goes back to normal just not styled
Serengeti
In v9, dropdown = year + month, so when you pass dropdown-year the component doesn't recognise it and falls back to default behaviour which is prob causing the duplication, so it's rendering both dropdown and default label
Answer
Serengeti
huh, give me a sec
@Serengeti huh, give me a sec
PalominoOP
ok gurt
ill give you a second