Refactor: Implement app-wide DatePicker enhancements

src/components/admin/ParkForm.tsx

@@ -230,11 +230,13 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="closing_date">Closing Date (if applicable)</Label>
+              <Label>Closing Date (if applicable)</Label>
-              <Input
+              <DatePicker
-                id="closing_date"
+                date={watch('closing_date') ? new Date(watch('closing_date')) : undefined}
-                type="date"
+                onSelect={(date) => setValue('closing_date', date ? date.toISOString().split('T')[0] : '')}
-                {...register('closing_date')}
+                placeholder="Select closing date"
+                disablePast={false}
+                fromYear={1800}
               />
             </div>
           </div>

src/components/admin/RideForm.tsx

@@ -291,11 +291,13 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="closing_date">Closing Date (if applicable)</Label>
+              <Label>Closing Date (if applicable)</Label>
-              <Input
+              <DatePicker
-                id="closing_date"
+                date={watch('closing_date') ? new Date(watch('closing_date')) : undefined}
-                type="date"
+                onSelect={(date) => setValue('closing_date', date ? date.toISOString().split('T')[0] : '')}
-                {...register('closing_date')}
+                placeholder="Select closing date"
+                disablePast={false}
+                fromYear={1800}
               />
             </div>
           </div>

src/components/parks/ParkFilters.tsx

@@ -9,6 +9,7 @@ import { Separator } from '@/components/ui/separator';
 import { RotateCcw } from 'lucide-react';
 import { Park } from '@/types/database';
 import { FilterState } from '@/pages/Parks';
+import { MonthYearPicker } from '@/components/ui/month-year-picker';
 
 interface ParkFiltersProps {
   filters: FilterState;
@@ -141,27 +142,25 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
         <div className="space-y-2">
           <Label>Opening Year</Label>
           <div className="flex gap-2">
-            <Input
+            <MonthYearPicker
-              type="number"
+              date={filters.openingYearStart ? new Date(filters.openingYearStart, 0, 1) : undefined}
-              placeholder="From"
+              onSelect={(date) => onFiltersChange({ 
-              min={minYear}
-              max={currentYear}
-              value={filters.openingYearStart || ''}
-              onChange={(e) => onFiltersChange({ 
                 ...filters, 
-                openingYearStart: e.target.value ? parseInt(e.target.value) : null 
+                openingYearStart: date ? date.getFullYear() : null 
               })}
+              placeholder="From year"
+              fromYear={minYear}
+              toYear={currentYear}
             />
-            <Input
+            <MonthYearPicker
-              type="number"
+              date={filters.openingYearEnd ? new Date(filters.openingYearEnd, 0, 1) : undefined}
-              placeholder="To"
+              onSelect={(date) => onFiltersChange({ 
-              min={minYear}
-              max={currentYear}
-              value={filters.openingYearEnd || ''}
-              onChange={(e) => onFiltersChange({ 
                 ...filters, 
-                openingYearEnd: e.target.value ? parseInt(e.target.value) : null 
+                openingYearEnd: date ? date.getFullYear() : null 
               })}
+              placeholder="To year"
+              fromYear={minYear}
+              toYear={currentYear}
             />
           </div>
         </div>

src/components/reviews/ReviewForm.tsx

@@ -152,9 +152,13 @@ export function ReviewForm({
             <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"
+              placeholder="When did you visit?"
               disableFuture={true}
+              fromYear={1950}
             />
+            <p className="text-xs text-muted-foreground">
+              Select the date of your visit to help others understand when this experience occurred.
+            </p>
           </div>
 
           {/* Wait Time (for rides) */}

src/components/search/SearchFilters.tsx

@@ -10,6 +10,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
 import { ChevronDown, Filter, X } from 'lucide-react';
 import { Combobox } from '@/components/ui/combobox';
 import { useCountries, useStatesProvinces, useManufacturers, useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
+import { DateRangePicker, DateRange } from '@/components/ui/date-range-picker';
 
 export interface SearchFilters {
   // Park filters
@@ -19,6 +20,7 @@ export interface SearchFilters {
   status?: string;
   openingYearMin?: number;
   openingYearMax?: number;
+  openingDateRange?: DateRange;
   ratingMin?: number;
   ratingMax?: number;
   rideCountMin?: number;
@@ -33,11 +35,13 @@ export interface SearchFilters {
   speedMin?: number;
   speedMax?: number;
   intensityLevel?: string;
+  rideDateRange?: DateRange;
   
   // Company filters
   companyType?: string;
   foundedYearMin?: number;
   foundedYearMax?: number;
+  companyDateRange?: DateRange;
   headquarters?: string;
 }
 
@@ -179,25 +183,37 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
 
                 <div className="space-y-4">
                   <div className="space-y-2">
-                    <Label>Opening Year Range</Label>
+                    <Label>Opening Date Range</Label>
-                    <div className="grid grid-cols-2 gap-2">
+                    <DateRangePicker
-                      <Input
+                      value={filters.openingDateRange}
-                        type="number"
+                      onChange={(range) => updateFilter('openingDateRange', range)}
-                        placeholder="From"
+                      placeholder="Select opening date range"
-                        min="1800"
+                      disableFuture={true}
-                        max={currentYear}
+                      fromYear={1800}
-                        value={filters.openingYearMin || ''}
+                      presets={[
-                        onChange={(e) => updateFilter('openingYearMin', e.target.value ? parseInt(e.target.value) : undefined)}
+                        {
+                          label: "Last 10 years",
+                          range: {
+                            from: new Date(new Date().getFullYear() - 10, 0, 1),
+                            to: new Date(),
+                          },
+                        },
+                        {
+                          label: "Last 25 years", 
+                          range: {
+                            from: new Date(new Date().getFullYear() - 25, 0, 1),
+                            to: new Date(),
+                          },
+                        },
+                        {
+                          label: "Before 2000",
+                          range: {
+                            from: new Date(1800, 0, 1),
+                            to: new Date(1999, 11, 31),
+                          },
+                        },
+                      ]}
                     />
-                      <Input
-                        type="number"
-                        placeholder="To"
-                        min="1800"
-                        max={currentYear}
-                        value={filters.openingYearMax || ''}
-                        onChange={(e) => updateFilter('openingYearMax', e.target.value ? parseInt(e.target.value) : undefined)}
-                      />
-                    </div>
                   </div>
 
                   <div className="space-y-2">
@@ -301,6 +317,40 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
                 </div>
 
                 <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label>Opening Date Range</Label>
+                    <DateRangePicker
+                      value={filters.rideDateRange}
+                      onChange={(range) => updateFilter('rideDateRange', range)}
+                      placeholder="Select ride opening date range"
+                      disableFuture={true}
+                      fromYear={1800}
+                      presets={[
+                        {
+                          label: "Recent (last 5 years)",
+                          range: {
+                            from: new Date(new Date().getFullYear() - 5, 0, 1),
+                            to: new Date(),
+                          },
+                        },
+                        {
+                          label: "Modern era (2000+)",
+                          range: {
+                            from: new Date(2000, 0, 1),
+                            to: new Date(),
+                          },
+                        },
+                        {
+                          label: "Classic era (before 2000)",
+                          range: {
+                            from: new Date(1800, 0, 1),
+                            to: new Date(1999, 11, 31),
+                          },
+                        },
+                      ]}
+                    />
+                  </div>
+                  
                   <div className="space-y-2">
                     <div className="flex items-center justify-between">
                       <Label>Height Range (meters)</Label>
@@ -382,25 +432,37 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
                 </div>
 
                 <div className="space-y-2">
-                  <Label>Founded Year Range</Label>
+                  <Label>Founded Date Range</Label>
-                  <div className="grid grid-cols-2 gap-2">
+                  <DateRangePicker
-                    <Input
+                    value={filters.companyDateRange}
-                      type="number"
+                    onChange={(range) => updateFilter('companyDateRange', range)}
-                      placeholder="From"
+                    placeholder="Select founding date range"
-                      min="1800"
+                    disableFuture={true}
-                      max={currentYear}
+                    fromYear={1800}
-                      value={filters.foundedYearMin || ''}
+                    presets={[
-                      onChange={(e) => updateFilter('foundedYearMin', e.target.value ? parseInt(e.target.value) : undefined)}
+                      {
+                        label: "Founded after 2000",
+                        range: {
+                          from: new Date(2000, 0, 1),
+                          to: new Date(),
+                        },
+                      },
+                      {
+                        label: "Founded 1950-2000",
+                        range: {
+                          from: new Date(1950, 0, 1),
+                          to: new Date(1999, 11, 31),
+                        },
+                      },
+                      {
+                        label: "Founded before 1950",
+                        range: {
+                          from: new Date(1800, 0, 1),
+                          to: new Date(1949, 11, 31),
+                        },
+                      },
+                    ]}
                   />
-                    <Input
-                      type="number"
-                      placeholder="To"
-                      min="1800"
-                      max={currentYear}
-                      value={filters.foundedYearMax || ''}
-                      onChange={(e) => updateFilter('foundedYearMax', e.target.value ? parseInt(e.target.value) : undefined)}
-                    />
-                  </div>
                 </div>
               </div>
             )}

src/components/ui/date-range-picker.tsx

@@ -0,0 +1,182 @@
+import * as React from "react";
+import { format } from "date-fns";
+import { CalendarIcon, X } from "lucide-react";
+import type { DateRange as CalendarDateRange } from "react-day-picker";
+
+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";
+import { Badge } from "@/components/ui/badge";
+
+export interface DateRange {
+  from?: Date;
+  to?: Date;
+}
+
+export interface DateRangePickerProps {
+  value?: DateRange;
+  onChange?: (range: DateRange | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  disableFuture?: boolean;
+  disablePast?: boolean;
+  fromYear?: number;
+  toYear?: number;
+  presets?: Array<{
+    label: string;
+    range: DateRange;
+  }>;
+}
+
+const defaultPresets = [
+  {
+    label: "Today",
+    range: {
+      from: new Date(),
+      to: new Date(),
+    },
+  },
+  {
+    label: "Last 7 days",
+    range: {
+      from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
+      to: new Date(),
+    },
+  },
+  {
+    label: "Last 30 days",
+    range: {
+      from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+      to: new Date(),
+    },
+  },
+  {
+    label: "This year",
+    range: {
+      from: new Date(new Date().getFullYear(), 0, 1),
+      to: new Date(),
+    },
+  },
+];
+
+export function DateRangePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date range",
+  disabled = false,
+  className,
+  disableFuture = false,
+  disablePast = false,
+  fromYear,
+  toYear,
+  presets = defaultPresets,
+}: DateRangePickerProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = (range: DateRange | undefined) => {
+    onChange?.(range);
+  };
+
+  const handlePresetSelect = (preset: DateRange) => {
+    handleSelect(preset);
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    handleSelect(undefined);
+  };
+
+  const getDisabledDates = (date: Date) => {
+    const now = new Date();
+    if (disableFuture && date > now) return true;
+    if (disablePast && date < now) return true;
+    return false;
+  };
+
+  const formatRange = (range: DateRange | undefined) => {
+    if (!range?.from) return placeholder;
+    if (!range.to) return format(range.from, "MMM dd, yyyy");
+    if (range.from.getTime() === range.to.getTime()) {
+      return format(range.from, "MMM dd, yyyy");
+    }
+    return `${format(range.from, "MMM dd, yyyy")} - ${format(range.to, "MMM dd, yyyy")}`;
+  };
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className={cn(
+              "w-full justify-start text-left font-normal",
+              !value?.from && "text-muted-foreground"
+            )}
+            disabled={disabled}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            <span className="truncate flex-1">
+              {formatRange(value)}
+            </span>
+            {value?.from && (
+              <X
+                className="ml-2 h-4 w-4 hover:text-destructive"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleClear();
+                }}
+              />
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <div className="flex">
+            <div className="flex flex-col sm:flex-row">
+              <Calendar
+                initialFocus
+                mode="range"
+                defaultMonth={value?.from}
+                selected={value as CalendarDateRange}
+                onSelect={handleSelect as (range: CalendarDateRange | undefined) => void}
+                numberOfMonths={2}
+                disabled={getDisabledDates}
+                className="p-3 pointer-events-auto"
+                fromYear={fromYear}
+                toYear={toYear}
+              />
+            </div>
+            {presets.length > 0 && (
+              <div className="flex flex-col gap-2 border-l p-3">
+                <div className="text-sm font-medium text-foreground">Presets</div>
+                <div className="grid gap-1">
+                  {presets.map((preset, index) => (
+                    <Button
+                      key={index}
+                      variant="ghost"
+                      size="sm"
+                      className="justify-start text-left h-auto p-2"
+                      onClick={() => handlePresetSelect(preset.range)}
+                    >
+                      {preset.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+      {value?.from && (
+        <Badge variant="secondary" className="w-fit">
+          {formatRange(value)}
+        </Badge>
+      )}
+    </div>
+  );
+}

src/components/ui/month-year-picker.tsx

@@ -0,0 +1,143 @@
+import * as React from "react";
+import { format } from "date-fns";
+import { CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export interface MonthYearPickerProps {
+  date?: Date;
+  onSelect?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  fromYear?: number;
+  toYear?: number;
+}
+
+export function MonthYearPicker({
+  date,
+  onSelect,
+  placeholder = "Pick month and year",
+  disabled = false,
+  className,
+  fromYear = 1800,
+  toYear = new Date().getFullYear(),
+}: MonthYearPickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const [tempMonth, setTempMonth] = React.useState(date?.getMonth() ?? new Date().getMonth());
+  const [tempYear, setTempYear] = React.useState(date?.getFullYear() ?? new Date().getFullYear());
+
+  const months = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+  ];
+
+  const years = Array.from(
+    { length: toYear - fromYear + 1 },
+    (_, i) => toYear - i
+  );
+
+  const handleSelect = () => {
+    const newDate = new Date(tempYear, tempMonth, 1);
+    onSelect?.(newDate);
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    onSelect?.(undefined);
+    setOpen(false);
+  };
+
+  React.useEffect(() => {
+    if (date) {
+      setTempMonth(date.getMonth());
+      setTempYear(date.getFullYear());
+    }
+  }, [date]);
+
+  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, "MMMM yyyy") : placeholder}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-4" align="start">
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Month</label>
+              <Select 
+                value={tempMonth.toString()} 
+                onValueChange={(value) => setTempMonth(parseInt(value))}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {months.map((month, index) => (
+                    <SelectItem key={month} value={index.toString()}>
+                      {month}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Year</label>
+              <Select 
+                value={tempYear.toString()} 
+                onValueChange={(value) => setTempYear(parseInt(value))}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className="max-h-[200px]">
+                  {years.map((year) => (
+                    <SelectItem key={year} value={year.toString()}>
+                      {year}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <Button size="sm" onClick={handleSelect} className="flex-1">
+              Select
+            </Button>
+            <Button size="sm" variant="outline" onClick={handleClear}>
+              Clear
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}