calcom/apps/web/components/ui/form/DateRangePicker.tsx

// @see: https://github.com/wojtekmaj/react-daterange-picker/issues/91
import { ArrowRightIcon, CalendarIcon } from "@heroicons/react/solid";
import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
import PrimitiveDateRangePicker from "@wojtekmaj/react-daterange-picker/dist/entry.nostyle";
import React from "react";
import "react-calendar/dist/Calendar.css";

type Props = {
  startDate: Date;
  endDate: Date;
  onDatesChange?: ((arg: { startDate: Date; endDate: Date }) => void) | undefined;
};

export const DateRangePicker = ({ startDate, endDate, onDatesChange }: Props) => {
  return (
    <PrimitiveDateRangePicker
      className="focus:border-primary-500 focus:ring-primary-500 rounded-sm border-gray-300 sm:text-sm"
      clearIcon={null}
      calendarIcon={<CalendarIcon className="h-5 w-5 text-gray-500" />}
      rangeDivider={<ArrowRightIcon className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
      value={[startDate, endDate]}
      onChange={([startDate, endDate]) => {
        if (typeof onDatesChange === "function") onDatesChange({ startDate, endDate });
      }}
    />
  );
};