Fix: Pass captionLayout to Calendar in DatePicker

src/components/admin/editors/FormerNamesEditor.tsx

@@ -94,10 +94,14 @@ export function FormerNamesEditor({ names, onChange, currentName }: FormerNamesE
                       <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                         <div>
                           <Label className="text-xs">Date Changed</Label>
-                          <DatePicker
-                            date={name.date_changed ? new Date(name.date_changed) : undefined}
-                            onSelect={(date) => updateName(actualIndex, 'date_changed', date || undefined)}
-                          />
+                <DatePicker
+                  date={name.date_changed ? new Date(name.date_changed) : undefined}
+                  onSelect={(date) => updateName(actualIndex, 'date_changed', date || undefined)}
+                  placeholder="Select or type date"
+                  allowTextEntry={true}
+                  fromYear={1800}
+                  toYear={new Date().getFullYear()}
+                />
                         </div>
 
                         <div>

src/components/reviews/ReviewForm.tsx

@@ -180,13 +180,15 @@ export function ReviewForm({
           {/* Visit Date */}
           <div className="space-y-2">
             <Label>Visit Date</Label>
-            <DatePicker
-              date={watch('visit_date') ? new Date(watch('visit_date')) : undefined}
-              onSelect={(date) => setValue('visit_date', date ? date.toISOString().split('T')[0] : undefined)}
-              placeholder="When did you visit?"
-              disableFuture={true}
-              fromYear={1950}
-            />
+              <DatePicker
+                date={watch('visit_date') ? new Date(watch('visit_date')) : undefined}
+                onSelect={(date) => setValue('visit_date', date ? date.toISOString().split('T')[0] : undefined)}
+                placeholder="When did you visit?"
+                disableFuture={true}
+                fromYear={1950}
+                allowTextEntry={true}
+                dateFormat="yyyy-MM-dd"
+              />
             <p className="text-xs text-muted-foreground">
               Select the date of your visit to help others understand when this experience occurred.
             </p>

src/components/ui/date-picker.tsx

@@ -139,6 +139,7 @@ export function DatePicker({
               className="p-3 pointer-events-auto"
               fromYear={fromYear}
               toYear={toYear}
+              captionLayout="dropdown-buttons"
             />
           </PopoverContent>
         </Popover>
@@ -175,6 +176,7 @@ export function DatePicker({
           className="p-3 pointer-events-auto"
           fromYear={fromYear}
           toYear={toYear}
+          captionLayout="dropdown-buttons"
         />
       </PopoverContent>
     </Popover>