Refactor: Implement app-wide DatePicker enhancements

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
-              type="number"
-              placeholder="From"
-              min={minYear}
-              max={currentYear}
-              value={filters.openingYearStart || ''}
-              onChange={(e) => onFiltersChange({ 
+            <MonthYearPicker
+              date={filters.openingYearStart ? new Date(filters.openingYearStart, 0, 1) : undefined}
+              onSelect={(date) => onFiltersChange({ 
                 ...filters, 
-                openingYearStart: e.target.value ? parseInt(e.target.value) : null 
+                openingYearStart: date ? date.getFullYear() : null 
               })}
+              placeholder="From year"
+              fromYear={minYear}
+              toYear={currentYear}
             />
-            <Input
-              type="number"
-              placeholder="To"
-              min={minYear}
-              max={currentYear}
-              value={filters.openingYearEnd || ''}
-              onChange={(e) => onFiltersChange({ 
+            <MonthYearPicker
+              date={filters.openingYearEnd ? new Date(filters.openingYearEnd, 0, 1) : undefined}
+              onSelect={(date) => 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>