add ISO 8601 date picker, replace all native date inputs

custom DateInput component using react-day-picker + date-fns with
Calendar popover, always displays YYYY-MM-DD regardless of browser
locale. adds shadcn Popover and Calendar components. replaces all
<input type="date"> across process-stepper, contact-detail, contact-form

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "therapyfinder",
 	"private": true,
-	"version": "2026.03.11.2",
+	"version": "2026.03.11.3",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
@@ -21,10 +21,12 @@
 		"@tanstack/zod-form-adapter": "^0.42.1",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"date-fns": "^4.1.0",
 		"jspdf": "^4.2.0",
 		"lucide-react": "^0.577.0",
 		"radix-ui": "^1.4.3",
 		"react": "^19.2.4",
+		"react-day-picker": "^9.14.0",
 		"react-dom": "^19.2.4",
 		"tailwind-merge": "^3.5.0",
 		"tailwindcss": "^4.2.1",

src/features/kontakte/components/contact-detail.tsx

@@ -13,6 +13,7 @@ import {
 import { Badge } from "@/shared/components/ui/badge";
 import { Button } from "@/shared/components/ui/button";
 import { Card, CardContent } from "@/shared/components/ui/card";
+import { DateInput } from "@/shared/components/ui/date-input";
 import { Input } from "@/shared/components/ui/input";
 import { Label } from "@/shared/components/ui/label";
 import { Separator } from "@/shared/components/ui/separator";
@@ -272,12 +273,10 @@ function NewKontaktForm({
 							{(field) => (
 								<div className="space-y-1">
 									<Label htmlFor="nk-datum">Datum</Label>
-									<input
+									<DateInput
 										id="nk-datum"
-										type="date"
-										className={inputClasses}
 										value={field.state.value}
-										onChange={(e) => field.handleChange(e.target.value)}
+										onChange={(iso) => field.handleChange(iso)}
 									/>
 								</div>
 							)}
@@ -410,11 +409,9 @@ function KontaktEditCard({
 							{(field) => (
 								<div className="space-y-1">
 									<Label>Datum</Label>
-									<input
+									<DateInput
-										type="date"
-										className={inputClasses}
 										value={field.state.value}
-										onChange={(e) => field.handleChange(e.target.value)}
+										onChange={(iso) => field.handleChange(iso)}
 									/>
 								</div>
 							)}

src/features/kontakte/components/contact-form.tsx

@@ -2,6 +2,7 @@ import { useForm } from "@tanstack/react-form";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { createKontakt, createTherapeut } from "@/features/kontakte/hooks";
 import { Button } from "@/shared/components/ui/button";
+import { DateInput } from "@/shared/components/ui/date-input";
 import { Separator } from "@/shared/components/ui/separator";
 import type { KontaktErgebnis, KontaktKanal } from "@/shared/db/schema";
 import { kontaktErgebnisEnum, kontaktKanalEnum } from "@/shared/db/schema";
@@ -157,13 +158,10 @@ export function ContactForm() {
 							<label htmlFor="datum" className="text-sm font-medium">
 								Datum
 							</label>
-							<input
+							<DateInput
 								id="datum"
-								type="date"
-								className={inputClasses}
 								value={field.state.value}
-								onChange={(e) => field.handleChange(e.target.value)}
+								onChange={(iso) => field.handleChange(iso)}
-								onBlur={field.handleBlur}
 							/>
 						</div>
 					)}

src/features/prozess/components/process-stepper.tsx

@@ -3,6 +3,7 @@ import { Link } from "@tanstack/react-router";
 import { useState } from "react";
 import { useTherapeutenListe } from "@/features/kontakte/hooks";
 import { Button } from "@/shared/components/ui/button";
+import { DateInput } from "@/shared/components/ui/date-input";
 import { Label } from "@/shared/components/ui/label";
 import { Separator } from "@/shared/components/ui/separator";
 import { Switch } from "@/shared/components/ui/switch";
@@ -273,11 +274,9 @@ function SprechstundeForm({ onDone }: { onDone: () => void }) {
 					{(field) => (
 						<div className="space-y-1">
 							<Label>Datum</Label>
-							<input
+							<DateInput
-								type="date"
-								className={inputClasses}
 								value={field.state.value}
-								onChange={(e) => field.handleChange(e.target.value)}
+								onChange={(iso) => field.handleChange(iso)}
 							/>
 						</div>
 					)}

src/shared/components/ui/calendar.tsx

@@ -0,0 +1,70 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import type { ComponentProps } from "react";
+import { DayPicker } from "react-day-picker";
+import { buttonVariants } from "@/shared/components/ui/button";
+import { cn } from "@/shared/lib/utils";
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	...props
+}: ComponentProps<typeof DayPicker>) {
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months: "flex flex-col sm:flex-row gap-2",
+				month: "flex flex-col gap-4",
+				month_caption: "flex justify-center pt-1 relative items-center h-7",
+				caption_label: "text-sm font-medium",
+				nav: "flex items-center gap-1",
+				button_previous: cn(
+					buttonVariants({ variant: "outline" }),
+					"absolute left-1 top-0 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				button_next: cn(
+					buttonVariants({ variant: "outline" }),
+					"absolute right-1 top-0 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				month_grid: "w-full border-collapse space-x-1",
+				weekdays: "flex",
+				weekday:
+					"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+				week: "flex w-full mt-2",
+				day: cn(
+					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50",
+					"first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
+				),
+				day_button: cn(
+					buttonVariants({ variant: "ghost" }),
+					"size-8 p-0 font-normal aria-selected:opacity-100",
+				),
+				range_end: "day-range-end",
+				selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+				today: "bg-accent text-accent-foreground",
+				outside:
+					"day-outside text-muted-foreground aria-selected:text-muted-foreground",
+				disabled: "text-muted-foreground opacity-50",
+				range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				Chevron: ({ orientation }) =>
+					orientation === "left" ? (
+						<ChevronLeft className="size-4" />
+					) : (
+						<ChevronRight className="size-4" />
+					),
+			}}
+			weekStartsOn={1}
+			{...props}
+		/>
+	);
+}
+
+export { Calendar };

src/shared/components/ui/date-input.tsx

@@ -0,0 +1,74 @@
+import { format, parse } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { type ComponentProps, useState } from "react";
+import { Button } from "@/shared/components/ui/button";
+import { Calendar } from "@/shared/components/ui/calendar";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import { cn } from "@/shared/lib/utils";
+
+interface DateInputProps
+	extends Omit<ComponentProps<"button">, "value" | "onChange"> {
+	value: string;
+	onChange: (iso: string) => void;
+	placeholder?: string;
+}
+
+function toDate(iso: string): Date | undefined {
+	if (!iso) return undefined;
+	const d = parse(iso, "yyyy-MM-dd", new Date());
+	return Number.isNaN(d.getTime()) ? undefined : d;
+}
+
+function toISO(date: Date): string {
+	return format(date, "yyyy-MM-dd");
+}
+
+export function DateInput({
+	value,
+	onChange,
+	placeholder = "YYYY-MM-DD",
+	className,
+	id,
+	...props
+}: DateInputProps) {
+	const [open, setOpen] = useState(false);
+	const selected = toDate(value);
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					id={id}
+					type="button"
+					variant="outline"
+					className={cn(
+						"h-9 w-full justify-start px-3 text-left font-normal",
+						!value && "text-muted-foreground",
+						className,
+					)}
+					{...props}
+				>
+					<CalendarIcon className="mr-2 size-4 shrink-0" />
+					{value || placeholder}
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-auto p-0" align="start">
+				<Calendar
+					mode="single"
+					selected={selected}
+					onSelect={(day) => {
+						if (day) {
+							onChange(toISO(day));
+							setOpen(false);
+						}
+					}}
+					defaultMonth={selected}
+				/>
+			</PopoverContent>
+		</Popover>
+	);
+}

src/shared/components/ui/popover.tsx

@@ -0,0 +1,28 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type ComponentProps, forwardRef } from "react";
+import { cn } from "@/shared/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = forwardRef<
+	HTMLDivElement,
+	ComponentProps<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };