React Day Picker Error

Answered

GravityExploitz ✦ posted this in #help-forum

2026-03-11T03:20:45.909Z

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

View full answer