From 6bc84d5b58bf007b151919cb2b3df4a1614d4632 Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Wed, 15 Apr 2026 18:21:17 -0400
Subject: [PATCH] feat(date-time-picker): add native date input alongside
 calendar popover

Replace the button-only trigger with a native <input type="date"> (or
datetime-local when not all-day) paired with an icon button that opens
the calendar popover.  This gives users direct keyboard entry while
keeping the rich calendar + quick-shortcut picker accessible.

- Add getInputValue helper to format the current value for the native
  input.
- Import the Input component.
- Restructure the layout to place the input and popover trigger
  side-by-side.
---
 src/components/date-time-picker.tsx | 107 ++++++++++++++++------------
 1 file changed, 61 insertions(+), 46 deletions(-)

diff --git a/src/components/date-time-picker.tsx b/src/components/date-time-picker.tsx
index f2631e4..d600cc8 100644
--- a/src/components/date-time-picker.tsx
+++ b/src/components/date-time-picker.tsx
@@ -13,6 +13,7 @@ import { CalendarIcon } from "lucide-react";
 import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
 import {
 	Popover,
 	PopoverContent,
@@ -36,6 +37,15 @@ interface QuickShortcutResult {
 	nextValue: string;
 }
 
+function getInputValue(value: string, allDay: boolean): string {
+	const parsed = parseValue(value);
+	if (!parsed) return "";
+
+	return allDay
+		? format(parsed, "yyyy-MM-dd")
+		: format(parsed, "yyyy-MM-dd'T'HH:mm");
+}
+
 /** Parse the incoming ISO / date string into a Date object, or return undefined. */
 function parseValue(value: string): Date | undefined {
 	if (!value) return undefined;
@@ -128,7 +138,6 @@ export function DateTimePicker({
 		value,
 		allDay,
 	);
-
 	const [open, setOpen] = React.useState(false);
 	const [visibleMonth, setVisibleMonth] = React.useState(() =>
 		getCalendarMonthForValue(value, new Date()),
@@ -168,52 +177,58 @@ export function DateTimePicker({
 
 	return (
 		<div className={cn("w-full", className)}>
-			{/* Date popover trigger */}
-			<Popover open={open} onOpenChange={setOpen}>
-				<PopoverTrigger asChild>
-					<Button
-						type="button"
-						variant="outline"
-						className={cn(
-							"flex flex-1 px-3 py-1 font-normal justify-start",
-							!displayLabel && "text-muted-foreground",
-						)}
+			<div className="flex items-center gap-2">
+				<Input
+					type={allDay ? "date" : "datetime-local"}
+					value={getInputValue(value, allDay)}
+					onChange={(event) => {
+						onChange(event.target.value);
+					}}
+					placeholder={placeholder}
+					className="flex-1"
+				/>
+				<Popover open={open} onOpenChange={setOpen}>
+					<PopoverTrigger asChild>
+						<Button
+							type="button"
+							variant="outline"
+							size="icon"
+							className={cn(!displayLabel && "text-muted-foreground")}
+							aria-label={displayLabel ?? placeholder}
+						>
+							<CalendarIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent
+						className="w-[min(22rem,calc(100vw-2rem))] p-0"
+						align="start"
+						sideOffset={8}
 					>
-						<CalendarIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
-						<span className="flex-1 truncate text-left">
-							{displayLabel ?? placeholder}
-						</span>
-					</Button>
-				</PopoverTrigger>
-				<PopoverContent
-					className="w-[min(22rem,calc(100vw-2rem))] p-0"
-					align="start"
-					sideOffset={8}
-				>
-					<div className="flex flex-wrap gap-1 border-b border-border px-3 py-2">
-						{quickOptions.map((label) => (
-							<Button
-								key={label}
-								type="button"
-								variant="ghost"
-								size="sm"
-								onClick={() => handleQuickSelect(label)}
-								className="h-auto px-2 py-1 text-xs text-muted-foreground"
-							>
-								{label}
-							</Button>
-						))}
-					</div>
-					<Calendar
-						mode="single"
-						month={visibleMonth}
-						onMonthChange={setVisibleMonth}
-						selected={parsed}
-						onSelect={handleDaySelect}
-						initialFocus
-					/>
-				</PopoverContent>
-			</Popover>
+						<div className="flex flex-wrap gap-1 border-b border-border px-3 py-2">
+							{quickOptions.map((label) => (
+								<Button
+									key={label}
+									type="button"
+									variant="ghost"
+									size="sm"
+									onClick={() => handleQuickSelect(label)}
+									className="h-auto px-2 py-1 text-xs text-muted-foreground"
+								>
+									{label}
+								</Button>
+							))}
+						</div>
+						<Calendar
+							mode="single"
+							month={visibleMonth}
+							onMonthChange={setVisibleMonth}
+							selected={parsed}
+							onSelect={handleDaySelect}
+							initialFocus
+						/>
+					</PopoverContent>
+				</Popover>
+			</div>
 		</div>
 	);
 }