React Datepicker — это компонент «календаря» для react. Давайте посмотрим, как можно использовать и стилизовать его с помощью пользовательского стиля и дополнительной иконки.

Установка пакета
Проверьте пакет npm. Вы можете установить его с помощью npm install react-datepicker —save или с помощью yarn add react-datepicker.

Импортируйте компонент datepicker и включите CSS-файл из пакета

	
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

Инициализация Datepicker
Создайте ref для компонента datepicker и состояние для диапазона дат; уберем fromDate и toDate из dateRange.

const datepickerRef = useRef(null);
const [dateRange, setDateRange] = useState>([null, null]);
const [fromDate, toDate] = dateRange;

Передайте значения fromDate, toDate и ссылку компоненту Datepicker.

Добавьте функцию-обработчик для установки дат в состояние нашего диапазона дат, которое передается в функцию onChange

	
const handleDateRange = (dates: Array) => {
    setDateRange(dates);
  };

Добавьте пользовательский стиль и передайте его в свойство className. В своем коде я использую tailwind CSS.

	
const customDateRangeStyle = `border border-blueBorder rounded-[10px] pl-2 pr-1 focus:outline-none text-[14px] font-semibold text-[#00156A]  border-[#BDD4FF] font-montserrat placeholder:font-[600] w-[230px] h-[48px] mb-0 bg-white w-full placeholder:text-[#D2D2D2]`;

Добавим пользовательскую иконку в наш компонент Datepicker.

Управление открытием календаря дат осуществляется щелчком на пиктограмме

	
const handleOpenDatepicker = () => {
  const datepickerElement: any = datepickerRef.current;
  if (datepickerElement) {
     datepickerElement.setFocus(true);
  }
};

Давайте посмотрим, что у нас получилось