From e7cbd56e8990afbf337c3db166b5d96672015f82 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 10 Oct 2025 08:24:33 +0200
Subject: [PATCH] feat(DateTimeInput): add calendar picker functionality to
 DateTimeInput component - Introduced a ref to manage the input element for
 triggering the native calendar picker. - Enhanced the Calendar icon with a
 click handler to open the date picker, improving user interaction. - Updated
 styles for the Calendar icon to include hover effects for better visual
 feedback.

---
 src/components/ui/DateTimeInput.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/DateTimeInput.tsx b/src/components/ui/DateTimeInput.tsx
index 4628eca..9e2a9e4 100644
--- a/src/components/ui/DateTimeInput.tsx
+++ b/src/components/ui/DateTimeInput.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Calendar } from 'lucide-react';
+import { useRef } from 'react';
 import {
   formatDateForDateTimeInput,
   parseDateTimeInput,
@@ -23,6 +24,8 @@ export function DateTimeInput({
   className = '',
   onFocus,
 }: DateTimeInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value
       ? parseDateTimeInput(e.target.value)
@@ -30,13 +33,22 @@ export function DateTimeInput({
     onChange(newValue);
   };
 
+  const handleCalendarClick = () => {
+    if (!disabled && inputRef.current) {
+      // Déclencher le calendrier natif du navigateur
+      inputRef.current.showPicker?.();
+    }
+  };
+
   return (
     <div className={`relative flex items-center ${className}`}>
       <Calendar
         size={16}
-        className="absolute left-3 text-[var(--muted-foreground)] pointer-events-none z-10"
+        className="absolute left-3 text-[var(--muted-foreground)] cursor-pointer z-10 hover:text-[var(--primary)] transition-colors"
+        onClick={handleCalendarClick}
       />
       <input
+        ref={inputRef}
         type="datetime-local"
         value={value ? formatDateForDateTimeInput(value) : ''}
         onChange={handleChange}