Date Range Picker

import { DateRangePicker } from "@/components/ui/date-range-picker";

export default function Example() {
  return <DateRangePicker />;
}

"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const DateRangePicker = forwardRef(({ className, startDate, endDate, onStartChange, onEndChange, ...props }, ref) => {
  return (
    <div ref={ref} className={cn("flex items-center gap-2", className)} {...props}>
      <input
        type="date"
        value={startDate || ""}
        onChange={(e) => onStartChange?.(e.target.value)}
        className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
      />
      <span className="text-sm text-muted-foreground">to</span>
      <input
        type="date"
        value={endDate || ""}
        onChange={(e) => onEndChange?.(e.target.value)}
        className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
      />
    </div>
  );
});
DateRangePicker.displayName = "DateRangePicker";

export { DateRangePicker };