diff --git a/apps/dashboard/src/components/common/date-time-picker.tsx b/apps/dashboard/src/components/common/date-time-picker.tsx
new file mode 100644
index 00000000..0ab2157a
--- /dev/null
+++ b/apps/dashboard/src/components/common/date-time-picker.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { Calendar as CalendarIcon, Clock } from "@openstatus/icons";
+import { Button } from "@openstatus/ui/components/ui/button";
+import { Calendar } from "@openstatus/ui/components/ui/calendar";
+import { Input } from "@openstatus/ui/components/ui/input";
+import { Label } from "@openstatus/ui/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@openstatus/ui/components/ui/popover";
+import { useIsMobile } from "@openstatus/ui/hooks/use-mobile";
+import { cn } from "@openstatus/ui/lib/utils";
+import { format, startOfDay } from "date-fns";
+import { useId } from "react";
+
+type DateTimePickerProps = {
+  value: Date;
+  onChange: (date: Date) => void;
+  /** Bounds, inclusive; a picked time is clamped into them. */
+  min?: Date;
+  max?: Date;
+} & Omit<React.ComponentProps<typeof Button>, "value" | "onChange">;
+
+/**
+ * Calendar + time field in a popover. The time input is uncontrolled: a
+ * controlled one gets its value attribute rewritten per keystroke and WebKit
+ * then drops the focused segment. It only follows `value` on open, so an
+ * external change while the popover is open is not reflected in it.
+ */
+export function DateTimePicker({
+  value,
+  onChange,
+  min,
+  max,
+  className,
+  size = "sm",
+  ...props
+}: DateTimePickerProps) {
+  const mobile = useIsMobile();
+  const id = useId();
+
+  /** Clamps into the bounds and reports a change; returns what was applied. */
+  function commit(next: Date) {
+    if (Number.isNaN(next.getTime())) return null;
+    const clamped = min && next < min ? min : max && next > max ? max : next;
+    if (clamped.getTime() !== value.getTime()) onChange(clamped);
+    return clamped;
+  }
+
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size={size}
+          className={cn("justify-start font-normal", className)}
+          {...props}
+        >
+          {format(value, "PP, h:mm a")}
+          <CalendarIcon className="text-muted-foreground ml-auto" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="pointer-events-auto w-auto p-0"
+        align="start"
+        side={mobile ? "bottom" : "left"}
+      >
+        <Calendar
+          mode="single"
+          selected={value}
+          defaultMonth={value}
+          onSelect={(day) => {
+            if (!day) return;
+            const next = new Date(day);
+            next.setHours(
+              value.getHours(),
+              value.getMinutes(),
+              value.getSeconds(),
+              value.getMilliseconds(),
+            );
+            commit(next);
+          }}
+          disabled={(day) =>
+            (min ? day < startOfDay(min) : false) || (max ? day > max : false)
+          }
+          initialFocus
+        />
+        <div className="flex items-center gap-3 border-t p-3">
+          <Label htmlFor={id} className="text-xs">
+            Time
+          </Label>
+          <div className="relative grow">
+            <Input
+              id={id}
+              type="time"
+              defaultValue={format(value, "HH:mm")}
+              className="peer appearance-none ps-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+              onChange={(e) => {
+                // "" while a segment is cleared
+                if (!e.target.value) return;
+                const [hours, minutes] = e.target.value.split(":").map(Number);
+                const next = new Date(value);
+                next.setHours(hours, minutes);
+                const applied = commit(next);
+                // show the clamped time instead of what was typed
+                if (applied && applied.getTime() !== next.getTime()) {
+                  e.target.value = format(applied, "HH:mm");
+                }
+              }}
+            />
+            <div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 peer-disabled:opacity-50">
+              <Clock size={16} aria-hidden="true" />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/dashboard/src/components/content/property-list.tsx b/apps/dashboard/src/components/content/property-list.tsx
index 7cc2ebdf..1f07b966 100644
--- a/apps/dashboard/src/components/content/property-list.tsx
+++ b/apps/dashboard/src/components/content/property-list.tsx
@@ -3,6 +3,7 @@ import { Input } from "@openstatus/ui/components/ui/input";
 import { SelectTrigger } from "@openstatus/ui/components/ui/select";
 import { cn } from "@openstatus/ui/lib/utils";
 
+import { DateTimePicker } from "@/components/common/date-time-picker";
 import { Link } from "@/components/common/link";
 
 export function PropertyList({
@@ -136,3 +137,20 @@ export function PropertyInput({
     />
   );
 }
+
+export function PropertyDateTimePicker({
+  className,
+  ...props
+}: React.ComponentProps<typeof DateTimePicker>) {
+  return (
+    <DateTimePicker
+      className={cn(
+        propertyControlClassName,
+        // the outline variant re-adds a border and tint in dark mode
+        "data-[state=open]:bg-accent dark:hover:bg-accent/50 md:text-sm dark:border-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/apps/dashboard/src/components/forms/incident/form.tsx b/apps/dashboard/src/components/forms/incident/form.tsx
index 9e01685b..3ddaa962 100644
--- a/apps/dashboard/src/components/forms/incident/form.tsx
+++ b/apps/dashboard/src/components/forms/incident/form.tsx
@@ -28,6 +28,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
+import { DateTimePicker } from "@/components/common/date-time-picker";
 import { Link } from "@/components/common/link";
 import {
   FormCardContent,
@@ -35,7 +36,6 @@ import {
 } from "@/components/forms/form-card";
 import { useFormSheetDirty } from "@/components/forms/form-sheet";
 import { personName, severityConfig } from "@/data/managed-incidents.client";
-import { formatDateForInput } from "@/lib/formatter";
 import { useTRPC } from "@/lib/trpc/client";
 import { errorMessage } from "@/lib/trpc/error";
 
@@ -47,10 +47,9 @@ const schema = z.object({
   summary: z.string().max(4000),
   commanderId: z.string(),
   startedAt: z
-    .string()
-    .min(1, "Start time is required.")
+    .date()
     .refine(
-      (value) => new Date(value) <= new Date(),
+      (value) => value <= new Date(),
       "Start time cannot be in the future.",
     ),
   statusReportId: z.string(),
@@ -96,7 +95,7 @@ export function FormDeclareIncident({
       // user.get is prefetched in the dashboard layout, so it is hydrated
       // before the sheet can mount and the default is never NONE for members.
       commanderId: user ? String(user.id) : NONE,
-      startedAt: formatDateForInput(new Date()),
+      startedAt: new Date(),
       statusReportId: NONE,
       openSlackChannel: slack === "ready",
       ...defaultValues,
@@ -120,7 +119,7 @@ export function FormDeclareIncident({
           summary: values.summary || undefined,
           commanderId:
             values.commanderId === NONE ? null : Number(values.commanderId),
-          startedAt: new Date(values.startedAt),
+          startedAt: values.startedAt,
           statusReportId:
             values.statusReportId === NONE
               ? undefined
@@ -239,7 +238,12 @@ export function FormDeclareIncident({
               <FormItem>
                 <FormLabel>Started at</FormLabel>
                 <FormControl>
-                  <Input type="datetime-local" {...field} />
+                  <DateTimePicker
+                    value={field.value}
+                    onChange={field.onChange}
+                    max={new Date()}
+                    className="w-[240px]"
+                  />
                 </FormControl>
                 <FormDescription>
                   When the impact began. Set it in the past to record an
diff --git a/apps/dashboard/src/components/forms/maintenance/form.tsx b/apps/dashboard/src/components/forms/maintenance/form.tsx
index a0ab4655..b61acbf7 100644
--- a/apps/dashboard/src/components/forms/maintenance/form.tsx
+++ b/apps/dashboard/src/components/forms/maintenance/form.tsx
@@ -1,9 +1,6 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Calendar as CalendarIcon, Clock } from "@openstatus/icons";
-import { Button } from "@openstatus/ui/components/ui/button";
-import { Calendar } from "@openstatus/ui/components/ui/calendar";
 import { Checkbox } from "@openstatus/ui/components/ui/checkbox";
 import {
   Form,
@@ -16,25 +13,20 @@ import {
 } from "@openstatus/ui/components/ui/form";
 import { Input } from "@openstatus/ui/components/ui/input";
 import { Label } from "@openstatus/ui/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@openstatus/ui/components/ui/popover";
 import { TabsContent } from "@openstatus/ui/components/ui/tabs";
 import { TabsList, TabsTrigger } from "@openstatus/ui/components/ui/tabs";
 import { Tabs } from "@openstatus/ui/components/ui/tabs";
 import { Textarea } from "@openstatus/ui/components/ui/textarea";
-import { useIsMobile } from "@openstatus/ui/hooks/use-mobile";
 import { cn } from "@openstatus/ui/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { isTRPCClientError } from "@trpc/client";
-import { addDays, format } from "date-fns";
+import { addDays } from "date-fns";
 import React, { useTransition } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
+import { DateTimePicker } from "@/components/common/date-time-picker";
 import {
   EmptyStateContainer,
   EmptyStateTitle,
@@ -80,7 +72,6 @@ export function FormMaintenance({
 }) {
   const trpc = useTRPC();
   const { data: workspace } = useQuery(trpc.workspace.get.queryOptions());
-  const mobile = useIsMobile();
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
@@ -158,101 +149,25 @@ export function FormMaintenance({
             render={({ field }) => (
               <FormItem className="flex flex-col">
                 <FormLabel>Start Date</FormLabel>
-                <Popover modal>
-                  <FormControl>
-                    <PopoverTrigger asChild>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        className={cn(
-                          "w-[240px] pl-3 text-left font-normal",
-                          !field.value && "text-muted-foreground",
-                        )}
-                      >
-                        {field.value ? (
-                          format(field.value, "PPP 'at' h:mm a")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                  </FormControl>
-                  <PopoverContent
-                    className="pointer-events-auto w-auto p-0"
-                    align="start"
-                    side={mobile ? "bottom" : "left"}
-                  >
-                    <Calendar
-                      mode="single"
-                      selected={field.value}
-                      onSelect={(selectedDate) => {
-                        if (!selectedDate) return;
-
-                        const newDate = new Date(selectedDate);
-                        newDate.setHours(
-                          field.value.getHours(),
-                          field.value.getMinutes(),
-                          field.value.getSeconds(),
-                          field.value.getMilliseconds(),
+                <FormControl>
+                  <DateTimePicker
+                    value={field.value}
+                    className="w-[240px]"
+                    onChange={(date) => {
+                      // a start moved past the end drags the end along,
+                      // keeping the duration
+                      if (watchEndDate && date > watchEndDate) {
+                        const duration =
+                          watchEndDate.getTime() - field.value.getTime();
+                        form.setValue(
+                          "endDate",
+                          new Date(date.getTime() + duration),
                         );
-                        field.onChange(newDate);
-
-                        // NOTE: if end date is before start date, set it to the same day as the start date
-                        if (watchEndDate && newDate > watchEndDate) {
-                          form.setValue("endDate", newDate);
-                        }
-                      }}
-                      initialFocus
-                    />
-                    <div className="border-t p-3">
-                      <div className="flex items-center gap-3">
-                        <Label htmlFor="time-start" className="text-xs">
-                          Enter time
-                        </Label>
-                        <div className="relative grow">
-                          <Input
-                            id="time-start"
-                            type="time"
-                            step="1"
-                            value={
-                              field.value
-                                ? field.value.toTimeString().slice(0, 8)
-                                : new Date().toTimeString().slice(0, 8)
-                            }
-                            className="peer appearance-none ps-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
-                            onChange={(e) => {
-                              try {
-                                const timeValue = e.target.value;
-                                if (!timeValue || !field.value) return;
-
-                                const [hours, minutes, seconds] = timeValue
-                                  .split(":")
-                                  .map(Number);
-
-                                const newDate = new Date(field.value);
-                                newDate.setHours(
-                                  hours,
-                                  minutes,
-                                  seconds || 0,
-                                  0,
-                                );
-
-                                field.onChange(newDate);
-                              } catch (error) {
-                                console.error(error);
-                              }
-                            }}
-                          />
-                          <div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 peer-disabled:opacity-50">
-                            <Clock size={16} aria-hidden="true" />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </PopoverContent>
-                </Popover>
+                      }
+                      field.onChange(date);
+                    }}
+                  />
+                </FormControl>
                 <FormDescription>
                   When the maintenance starts. Shown in your timezone (
                   <code className="font-commit-mono text-foreground/70">
@@ -277,96 +192,13 @@ export function FormMaintenance({
             render={({ field }) => (
               <FormItem className="flex flex-col">
                 <FormLabel>End Date</FormLabel>
-                <Popover modal>
-                  <FormControl>
-                    <PopoverTrigger asChild>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        className={cn(
-                          "w-[240px] pl-3 text-left font-normal",
-                          !field.value && "text-muted-foreground",
-                        )}
-                      >
-                        {field.value ? (
-                          format(field.value, "PPP 'at' h:mm a")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                  </FormControl>
-                  <PopoverContent
-                    className="pointer-events-auto w-auto p-0"
-                    align="start"
-                    side={mobile ? "bottom" : "left"}
-                  >
-                    <Calendar
-                      mode="single"
-                      selected={field.value}
-                      onSelect={(selectedDate) => {
-                        if (!selectedDate) return;
-
-                        const newDate = new Date(selectedDate);
-                        newDate.setHours(
-                          field.value.getHours(),
-                          field.value.getMinutes(),
-                          field.value.getSeconds(),
-                          field.value.getMilliseconds(),
-                        );
-                        field.onChange(newDate);
-                      }}
-                      initialFocus
-                    />
-                    <div className="border-t p-3">
-                      <div className="flex items-center gap-3">
-                        <Label htmlFor="time-end" className="text-xs">
-                          Enter time
-                        </Label>
-                        <div className="relative grow">
-                          <Input
-                            id="time-end"
-                            type="time"
-                            step="1"
-                            value={
-                              field.value
-                                ? field.value.toTimeString().slice(0, 8)
-                                : new Date().toTimeString().slice(0, 8)
-                            }
-                            className="peer appearance-none ps-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
-                            onChange={(e) => {
-                              try {
-                                const timeValue = e.target.value;
-                                if (!timeValue || !field.value) return;
-
-                                const [hours, minutes, seconds] = timeValue
-                                  .split(":")
-                                  .map(Number);
-
-                                const newDate = new Date(field.value);
-                                newDate.setHours(
-                                  hours,
-                                  minutes,
-                                  seconds || 0,
-                                  0,
-                                );
-
-                                field.onChange(newDate);
-                              } catch (error) {
-                                console.error(error);
-                              }
-                            }}
-                          />
-                          <div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 peer-disabled:opacity-50">
-                            <Clock size={16} aria-hidden="true" />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </PopoverContent>
-                </Popover>
+                <FormControl>
+                  <DateTimePicker
+                    value={field.value}
+                    onChange={field.onChange}
+                    className="w-[240px]"
+                  />
+                </FormControl>
                 <FormDescription>
                   When the maintenance ends. Shown in your timezone (
                   <code className="font-commit-mono text-foreground/70">
diff --git a/apps/dashboard/src/components/forms/status-report-update/form.tsx b/apps/dashboard/src/components/forms/status-report-update/form.tsx
index 94e821c4..6a26bd54 100644
--- a/apps/dashboard/src/components/forms/status-report-update/form.tsx
+++ b/apps/dashboard/src/components/forms/status-report-update/form.tsx
@@ -3,9 +3,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { pageComponentImpact } from "@openstatus/db/src/schema/page_components/constants";
 import { statusReportStatus } from "@openstatus/db/src/schema/status_reports/constants";
-import { Calendar as CalendarIcon, Clock } from "@openstatus/icons";
-import { Button } from "@openstatus/ui/components/ui/button";
-import { Calendar } from "@openstatus/ui/components/ui/calendar";
 import { Checkbox } from "@openstatus/ui/components/ui/checkbox";
 import {
   Form,
@@ -16,13 +13,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@openstatus/ui/components/ui/form";
-import { Input } from "@openstatus/ui/components/ui/input";
 import { Label } from "@openstatus/ui/components/ui/label";
-import {
-  PopoverContent,
-  PopoverTrigger,
-} from "@openstatus/ui/components/ui/popover";
-import { Popover } from "@openstatus/ui/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -34,16 +25,15 @@ import { TabsContent } from "@openstatus/ui/components/ui/tabs";
 import { TabsList, TabsTrigger } from "@openstatus/ui/components/ui/tabs";
 import { Tabs } from "@openstatus/ui/components/ui/tabs";
 import { Textarea } from "@openstatus/ui/components/ui/textarea";
-import { useIsMobile } from "@openstatus/ui/hooks/use-mobile";
 import { cn } from "@openstatus/ui/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { isTRPCClientError } from "@trpc/client";
-import { format } from "date-fns";
 import React, { useTransition } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
+import { DateTimePicker } from "@/components/common/date-time-picker";
 import { ProcessMessage } from "@/components/content/process-message";
 import {
   FormCardContent,
@@ -88,7 +78,6 @@ export function FormStatusReportUpdate({
 }) {
   const trpc = useTRPC();
   const { data: workspace } = useQuery(trpc.workspace.get.queryOptions());
-  const mobile = useIsMobile();
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
@@ -202,94 +191,15 @@ export function FormStatusReportUpdate({
             render={({ field }) => (
               <FormItem className="flex flex-col">
                 <FormLabel>Date</FormLabel>
-                <Popover modal>
-                  <FormControl>
-                    <PopoverTrigger asChild>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        className={cn(
-                          "w-[240px] pl-3 text-left font-normal",
-                          !field.value && "text-muted-foreground",
-                        )}
-                      >
-                        {field.value ? (
-                          format(field.value, "PPP 'at' h:mm a")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                  </FormControl>
-                  <PopoverContent
-                    className="pointer-events-auto w-auto p-0"
-                    align="start"
-                    side={mobile ? "bottom" : "left"}
-                  >
-                    <Calendar
-                      mode="single"
-                      selected={field.value}
-                      onSelect={(selectedDate) => {
-                        if (!selectedDate) return;
-                        const newDate = new Date(selectedDate);
-                        newDate.setHours(
-                          field.value.getHours(),
-                          field.value.getMinutes(),
-                          field.value.getSeconds(),
-                          field.value.getMilliseconds(),
-                        );
-                        field.onChange(newDate);
-                      }}
-                      disabled={(date) =>
-                        date > new Date() || date < new Date("1900-01-01")
-                      }
-                      initialFocus
-                    />
-                    <div className="border-t p-3">
-                      <div className="flex items-center gap-3">
-                        <Label htmlFor="time" className="text-xs">
-                          Enter time
-                        </Label>
-                        <div className="relative grow">
-                          <Input
-                            id="time"
-                            type="time"
-                            step="1"
-                            defaultValue={new Date().toTimeString().slice(0, 8)}
-                            className="peer appearance-none ps-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
-                            onChange={(e) => {
-                              try {
-                                const timeValue = e.target.value;
-                                if (!timeValue || !field.value) return;
-
-                                const [hours, minutes, seconds] = timeValue
-                                  .split(":")
-                                  .map(Number);
-
-                                const newDate = new Date(field.value);
-                                newDate.setHours(
-                                  hours,
-                                  minutes,
-                                  seconds || 0,
-                                  0,
-                                );
-
-                                field.onChange(newDate);
-                              } catch (error) {
-                                console.error(error);
-                              }
-                            }}
-                          />
-                          <div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 peer-disabled:opacity-50">
-                            <Clock size={16} aria-hidden="true" />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </PopoverContent>
-                </Popover>
+                <FormControl>
+                  <DateTimePicker
+                    value={field.value}
+                    onChange={field.onChange}
+                    min={new Date("1900-01-01")}
+                    max={new Date()}
+                    className="w-[240px]"
+                  />
+                </FormControl>
                 <FormDescription>
                   When the status report was created. Shown in your timezone (
                   <code className="font-commit-mono text-foreground/70">
diff --git a/apps/dashboard/src/components/forms/status-report/form.tsx b/apps/dashboard/src/components/forms/status-report/form.tsx
index bf769987..b309e8da 100644
--- a/apps/dashboard/src/components/forms/status-report/form.tsx
+++ b/apps/dashboard/src/components/forms/status-report/form.tsx
@@ -3,9 +3,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { pageComponentImpact } from "@openstatus/db/src/schema/page_components/constants";
 import { statusReportStatus } from "@openstatus/db/src/schema/status_reports/constants";
-import { Calendar as CalendarIcon, Clock } from "@openstatus/icons";
-import { Button } from "@openstatus/ui/components/ui/button";
-import { Calendar } from "@openstatus/ui/components/ui/calendar";
 import { Checkbox } from "@openstatus/ui/components/ui/checkbox";
 import {
   Form,
@@ -18,11 +15,6 @@ import {
 } from "@openstatus/ui/components/ui/form";
 import { Input } from "@openstatus/ui/components/ui/input";
 import { Label } from "@openstatus/ui/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@openstatus/ui/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -34,16 +26,15 @@ import { TabsContent } from "@openstatus/ui/components/ui/tabs";
 import { TabsList, TabsTrigger } from "@openstatus/ui/components/ui/tabs";
 import { Tabs } from "@openstatus/ui/components/ui/tabs";
 import { Textarea } from "@openstatus/ui/components/ui/textarea";
-import { useIsMobile } from "@openstatus/ui/hooks/use-mobile";
 import { cn } from "@openstatus/ui/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { isTRPCClientError } from "@trpc/client";
-import { format } from "date-fns";
 import React, { useTransition } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
+import { DateTimePicker } from "@/components/common/date-time-picker";
 import {
   EmptyStateContainer,
   EmptyStateTitle,
@@ -102,7 +93,6 @@ export function FormStatusReport({
 }) {
   const trpc = useTRPC();
   const { data: workspace } = useQuery(trpc.workspace.get.queryOptions());
-  const mobile = useIsMobile();
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const form = useForm<FormValues>({
     resolver: zodResolver(defaultValues ? updateSchema : schema),
@@ -226,96 +216,15 @@ export function FormStatusReport({
                 render={({ field }) => (
                   <FormItem className="flex flex-col">
                     <FormLabel>Date</FormLabel>
-                    <Popover modal>
-                      <FormControl>
-                        <PopoverTrigger asChild>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            className={cn(
-                              "w-[240px] pl-3 text-left font-normal",
-                              !field.value && "text-muted-foreground",
-                            )}
-                          >
-                            {field.value ? (
-                              format(field.value, "PPP 'at' h:mm a")
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                          </Button>
-                        </PopoverTrigger>
-                      </FormControl>
-                      <PopoverContent
-                        className="pointer-events-auto w-auto p-0"
-                        align="start"
-                        side={mobile ? "bottom" : "left"}
-                      >
-                        <Calendar
-                          mode="single"
-                          selected={field.value}
-                          onSelect={(selectedDate) => {
-                            if (!selectedDate) return;
-                            const newDate = new Date(selectedDate);
-                            newDate.setHours(
-                              field.value.getHours(),
-                              field.value.getMinutes(),
-                              field.value.getSeconds(),
-                              field.value.getMilliseconds(),
-                            );
-                            field.onChange(newDate);
-                          }}
-                          disabled={(date) =>
-                            date > new Date() || date < new Date("1900-01-01")
-                          }
-                          initialFocus
-                        />
-                        <div className="border-t p-3">
-                          <div className="flex items-center gap-3">
-                            <Label htmlFor="time" className="text-xs">
-                              Enter time
-                            </Label>
-                            <div className="relative grow">
-                              <Input
-                                id="time"
-                                type="time"
-                                step="1"
-                                defaultValue={new Date()
-                                  .toTimeString()
-                                  .slice(0, 8)}
-                                className="peer appearance-none ps-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
-                                onChange={(e) => {
-                                  try {
-                                    const timeValue = e.target.value;
-                                    if (!timeValue || !field.value) return;
-
-                                    const [hours, minutes, seconds] = timeValue
-                                      .split(":")
-                                      .map(Number);
-
-                                    const newDate = new Date(field.value);
-                                    newDate.setHours(
-                                      hours,
-                                      minutes,
-                                      seconds || 0,
-                                      0,
-                                    );
-
-                                    field.onChange(newDate);
-                                  } catch (error) {
-                                    console.error(error);
-                                  }
-                                }}
-                              />
-                              <div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 peer-disabled:opacity-50">
-                                <Clock size={16} aria-hidden="true" />
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </PopoverContent>
-                    </Popover>
+                    <FormControl>
+                      <DateTimePicker
+                        value={field.value}
+                        onChange={field.onChange}
+                        min={new Date("1900-01-01")}
+                        max={new Date()}
+                        className="w-[240px]"
+                      />
+                    </FormControl>
                     <FormDescription>
                       When the status report was created. Shown in your timezone
                       (
diff --git a/apps/dashboard/src/components/incidents/declare-from-row.tsx b/apps/dashboard/src/components/incidents/declare-from-row.tsx
index 7ad624b9..99c11cf0 100644
--- a/apps/dashboard/src/components/incidents/declare-from-row.tsx
+++ b/apps/dashboard/src/components/incidents/declare-from-row.tsx
@@ -4,7 +4,6 @@ import { Button } from "@openstatus/ui/components/ui/button";
 import { useQuery } from "@tanstack/react-query";
 
 import { useFeature } from "@/hooks/use-feature";
-import { formatDateForInput } from "@/lib/formatter";
 import { useTRPC } from "@/lib/trpc/client";
 
 import {
@@ -41,9 +40,7 @@ export function DeclareFromRow({
       defaultValues={{
         title,
         // epoch = legacy report without dates; prefill now instead
-        startedAt: formatDateForInput(
-          startedAt.getTime() === 0 ? new Date() : startedAt,
-        ),
+        startedAt: startedAt.getTime() === 0 ? new Date() : startedAt,
         ...(statusReportId ? { statusReportId: String(statusReportId) } : {}),
       }}
     >
diff --git a/apps/dashboard/src/components/maintenances/maintenance-properties.tsx b/apps/dashboard/src/components/maintenances/maintenance-properties.tsx
index 79fc2c25..03deaf58 100644
--- a/apps/dashboard/src/components/maintenances/maintenance-properties.tsx
+++ b/apps/dashboard/src/components/maintenances/maintenance-properties.tsx
@@ -10,7 +10,7 @@ import { StatusDot } from "@/components/common/status-dot";
 import { UserAvatar } from "@/components/common/user-avatar";
 import {
   Property,
-  PropertyInput,
+  PropertyDateTimePicker,
   PropertyLabel,
   PropertyLink,
   PropertyList,
@@ -22,7 +22,6 @@ import {
   maintenanceStatusConfig,
 } from "@/data/overview-events.client";
 import { useHydrated } from "@/hooks/use-hydrated";
-import { formatDateForInput } from "@/lib/formatter";
 
 import { useUpdateMaintenance } from "./use-update-maintenance";
 
@@ -57,15 +56,13 @@ export function MaintenanceProperties({
   status: MaintenanceStatus;
   publicUrl: string;
 }) {
-  // datetime-local values and the timezone are browser-local
+  // the formatted dates and the timezone are browser-local
   const hydrated = useHydrated();
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  // null = pristine: the inputs follow the server copy until edited.
-  const [draft, setDraft] = useState<{ from: string; to: string } | null>(null);
-  const serverFrom = formatDateForInput(maintenance.from);
-  const serverTo = formatDateForInput(maintenance.to);
-  const from = draft?.from ?? serverFrom;
-  const to = draft?.to ?? serverTo;
+  // null = pristine: the pickers follow the server copy until edited.
+  const [draft, setDraft] = useState<{ from: Date; to: Date } | null>(null);
+  const from = draft?.from ?? maintenance.from;
+  const to = draft?.to ?? maintenance.to;
   const { update, isPending } = useUpdateMaintenance(maintenance.id, {
     onSuccess: () => {
       toast.success("Schedule saved");
@@ -73,8 +70,11 @@ export function MaintenanceProperties({
     },
   });
 
-  const dirty = draft !== null && (from !== serverFrom || to !== serverTo);
-  const invalid = !from || !to || new Date(to) <= new Date(from);
+  const dirty =
+    draft !== null &&
+    (from.getTime() !== maintenance.from.getTime() ||
+      to.getTime() !== maintenance.to.getTime());
+  const invalid = to <= from;
   const author = maintenance.createdByUser;
   const editor = distinctEditor(maintenance);
 
@@ -96,37 +96,36 @@ export function MaintenanceProperties({
       <Property>
         <PropertyLabel>From</PropertyLabel>
         <PropertyValue>
-          <PropertyInput
-            type="datetime-local"
-            aria-label="From"
-            value={hydrated ? from : ""}
-            onChange={(e) => setDraft({ from: e.target.value, to })}
-          />
+          {hydrated ? (
+            <PropertyDateTimePicker
+              aria-label="From"
+              value={from}
+              onChange={(date) => setDraft({ from: date, to })}
+            />
+          ) : (
+            <div className="h-8" />
+          )}
         </PropertyValue>
       </Property>
       <Property>
         <PropertyLabel>To</PropertyLabel>
         <PropertyValue className="flex-wrap">
-          <PropertyInput
-            type="datetime-local"
-            aria-label="To"
-            value={hydrated ? to : ""}
-            onChange={(e) => setDraft({ from, to: e.target.value })}
-          />
+          {hydrated ? (
+            <PropertyDateTimePicker
+              aria-label="To"
+              value={to}
+              onChange={(date) => setDraft({ from, to: date })}
+            />
+          ) : (
+            <div className="h-8" />
+          )}
           {dirty ? (
             <div className="grid w-full grid-cols-2 gap-1 font-sans">
               <Button
                 size="sm"
                 className="h-7"
                 disabled={invalid || isPending}
-                // an untouched field keeps its Date: the input drops seconds
-                onClick={() =>
-                  update({
-                    startDate:
-                      from === serverFrom ? maintenance.from : new Date(from),
-                    endDate: to === serverTo ? maintenance.to : new Date(to),
-                  })
-                }
+                onClick={() => update({ startDate: from, endDate: to })}
               >
                 Save
               </Button>
@@ -139,7 +138,7 @@ export function MaintenanceProperties({
               >
                 Reset
               </Button>
-              {from && to && invalid ? (
+              {invalid ? (
                 <span className="text-destructive col-span-full text-xs">
                   End must be after start
                 </span>
diff --git a/apps/dashboard/src/components/status-reports/status-report-composer.tsx b/apps/dashboard/src/components/status-reports/status-report-composer.tsx
index 7fd807c5..27839efd 100644
--- a/apps/dashboard/src/components/status-reports/status-report-composer.tsx
+++ b/apps/dashboard/src/components/status-reports/status-report-composer.tsx
@@ -10,7 +10,6 @@ import { statusReportStatus } from "@openstatus/db/src/schema/status_reports/con
 import { Close } from "@openstatus/icons";
 import { Button } from "@openstatus/ui/components/ui/button";
 import { Checkbox } from "@openstatus/ui/components/ui/checkbox";
-import { Input } from "@openstatus/ui/components/ui/input";
 import { Label } from "@openstatus/ui/components/ui/label";
 import {
   Select,
@@ -23,6 +22,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
 
+import { DateTimePicker } from "@/components/common/date-time-picker";
 import { StatusDot } from "@/components/common/status-dot";
 import {
   ComponentImpact,
@@ -49,7 +49,6 @@ import {
   statusVariants,
   toCreateStatusReportUpdateInput,
 } from "@/data/status-report-updates.client";
-import { formatDateForInput } from "@/lib/formatter";
 import { useTRPC } from "@/lib/trpc/client";
 import { errorMessage } from "@/lib/trpc/error";
 
@@ -90,7 +89,9 @@ export function StatusReportComposer({
   const [notifyChecked, setNotifyChecked] = useState(true);
   const [selected, setSelected] = useState<StatusReportStatus | null>(null);
   // null = now, resolved at publish time so an open composer never backdates.
-  const [date, setDate] = useState<string | null>(null);
+  const [date, setDate] = useState<Date | null>(null);
+  // shown while `date` is null; refreshed on reset
+  const [now, setNow] = useState(() => new Date());
   const [overrides, setOverrides] = useState<Map<number, PageComponentImpact>>(
     () => new Map(),
   );
@@ -100,13 +101,7 @@ export function StatusReportComposer({
   const publish = usePublishUpdate(report.id);
   const notify = canNotify && notifyChecked;
   const status = selected ?? getNextStatus(report.status);
-  const now = formatDateForInput(new Date());
-  // the input's `max` is not enforced on the button handler
-  const invalidDate =
-    date !== null &&
-    (date === "" ||
-      Number.isNaN(new Date(date).getTime()) ||
-      new Date(date) > new Date());
+  const invalidDate = date !== null && date > new Date();
   const disabled = publish.isPending || !message.trim() || invalidDate;
 
   const byId = new Map<number, Component>(
@@ -129,6 +124,7 @@ export function StatusReportComposer({
     setMessage("");
     setSelected(null);
     setDate(null);
+    setNow(new Date());
     setOverrides(new Map());
     setIds(null);
   }
@@ -141,7 +137,7 @@ export function StatusReportComposer({
         values: {
           status,
           message: message.trim(),
-          date: date ? new Date(date) : new Date(),
+          date: date ?? new Date(),
           componentImpacts: components.map((c) => ({
             pageComponentId: c.id,
             impact: impactFor(c.id),
@@ -310,13 +306,13 @@ export function StatusReportComposer({
               </SelectContent>
             </Select>
             <span>at</span>
-            <Input
-              type="datetime-local"
+            <DateTimePicker
+              key={now.getTime()}
               aria-label="Date"
               value={date ?? now}
-              max={now}
-              onChange={(e) => setDate(e.target.value)}
-              className="bg-background text-foreground h-8 w-auto font-mono md:text-sm"
+              max={new Date()}
+              onChange={setDate}
+              className="bg-background text-foreground h-8 font-mono"
             />
           </div>
           <div className="ml-auto flex items-center gap-3">