feat: Implement enhanced date picker component

src/components/admin/ParkForm.tsx

@@ -9,6 +9,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { PhotoUpload } from '@/components/upload/PhotoUpload';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { DatePicker } from '@/components/ui/date-picker';
 import { toast } from '@/hooks/use-toast';
 import { MapPin, Save, X } from 'lucide-react';
 
@@ -218,11 +219,13 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
           {/* Dates */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="space-y-2">
-              <Label htmlFor="opening_date">Opening Date</Label>
+              <Label>Opening Date</Label>
-              <Input
+              <DatePicker
-                id="opening_date"
+                date={watch('opening_date') ? new Date(watch('opening_date')) : undefined}
-                type="date"
+                onSelect={(date) => setValue('opening_date', date ? date.toISOString().split('T')[0] : '')}
-                {...register('opening_date')}
+                placeholder="Select opening date"
+                disableFuture={true}
+                fromYear={1800}
               />
             </div>
 

src/components/admin/RideForm.tsx

@@ -9,6 +9,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { PhotoUpload } from '@/components/upload/PhotoUpload';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { DatePicker } from '@/components/ui/date-picker';
 import { toast } from '@/hooks/use-toast';
 import { Zap, Save, X } from 'lucide-react';
 
@@ -279,11 +280,13 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
           {/* Dates */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="space-y-2">
-              <Label htmlFor="opening_date">Opening Date</Label>
+              <Label>Opening Date</Label>
-              <Input
+              <DatePicker
-                id="opening_date"
+                date={watch('opening_date') ? new Date(watch('opening_date')) : undefined}
-                type="date"
+                onSelect={(date) => setValue('opening_date', date ? date.toISOString().split('T')[0] : '')}
-                {...register('opening_date')}
+                placeholder="Select opening date"
+                disableFuture={true}
+                fromYear={1800}
               />
             </div>
 

src/components/reviews/ReviewForm.tsx

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Star, Send } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
 import { supabase } from '@/integrations/supabase/client';
@@ -45,6 +46,7 @@ export function ReviewForm({
     handleSubmit,
     reset,
     setValue,
+    watch,
     formState: {
       errors
     }
@@ -146,8 +148,13 @@ export function ReviewForm({
 
           {/* Visit Date */}
           <div className="space-y-2">
-            <Label htmlFor="visit_date">Visit Date</Label>
+            <Label>Visit Date</Label>
-            <Input id="visit_date" type="date" {...register('visit_date')} />
+            <DatePicker
+              date={watch('visit_date') ? new Date(watch('visit_date')) : undefined}
+              onSelect={(date) => setValue('visit_date', date ? date.toISOString().split('T')[0] : '')}
+              placeholder="Select visit date"
+              disableFuture={true}
+            />
           </div>
 
           {/* Wait Time (for rides) */}

src/components/ui/date-picker.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export interface DatePickerProps {
+  date?: Date;
+  onSelect?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  disableFuture?: boolean;
+  disablePast?: boolean;
+  fromYear?: number;
+  toYear?: number;
+}
+
+export function DatePicker({
+  date,
+  onSelect,
+  placeholder = "Pick a date",
+  disabled = false,
+  className,
+  disableFuture = false,
+  disablePast = false,
+  fromYear,
+  toYear,
+}: DatePickerProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = (selectedDate: Date | undefined) => {
+    onSelect?.(selectedDate);
+    setOpen(false);
+  };
+
+  const getDisabledDates = (date: Date) => {
+    const now = new Date();
+    if (disableFuture && date > now) return true;
+    if (disablePast && date < now) return true;
+    return false;
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !date && "text-muted-foreground",
+            className
+          )}
+          disabled={disabled}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          <span className="truncate">
+            {date ? format(date, "PPP") : placeholder}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={handleSelect}
+          disabled={getDisabledDates}
+          initialFocus
+          className="p-3 pointer-events-auto"
+          fromYear={fromYear}
+          toYear={toYear}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}