CaptionDropdowns don't visible

[jullic]

Hi,
how do I make it visitble?

import { FC, useState } from 'react';
import classNames from 'classnames';
import { IDatePickerProps } from './DatePicker.props';
import styles from './DatePicker.module.css';
import { CaptionDropdowns, DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';
import { ru } from 'date-fns/locale';

export const DatePicker: FC<IDatePickerProps> = ({ className, ...props }) => {
	const [selectedDay, setSelectedDay] = useState<Date>();
	return (
		<div className={classNames(styles.root, className)} {...props}>
			<DayPicker
				mode='single'
				locale={ru}
				selected={selectedDay}
				onSelect={setSelectedDay}
				components={{
					Caption: CaptionDropdowns,
				}}
			/>
		</div>
	);
};

[gpbl]

Hi @jullic!

You need to set the fromYear and toYear props if you want the captionLayout prop to work:

export const DatePicker: FC<IDatePickerProps> = ({ className, ...props }) => {
	const [selectedDay, setSelectedDay] = useState<Date>();
	return (
		<div className={classNames(styles.root, className)} {...props}>
			<DayPicker
				mode='single'
				locale={ru}
				selected={selectedDay}
				onSelect={setSelectedDay}
- 				components={{
-					Caption: CaptionDropdowns,
-				}}
+				fromYear={2023}
+				toYear={2023}
+				captionLayout="dropdown"
			/>
		</div>
	);
};

E.g.: https://react-day-picker.js.org/basics/navigation#choosing-a-caption-layout