feat: dom rendering pickers

src/components/pickers/DatePicker.tsx

@@ -16,12 +16,58 @@ const DatePicker: React.FC<DatePickerProps> = ({ coordinates, selector, onClose
     setSelectedDate(e.target.value);
   };
 
+  const updateDOMElement = (selector: string, value: string) => {
+    try {
+      let iframeElement = document.querySelector('#dom-browser-iframe') as HTMLIFrameElement;
+      
+      if (!iframeElement) {
+        iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
+      }
+
+      if (!iframeElement) {
+        const browserWindow = document.querySelector('#browser-window');
+        if (browserWindow) {
+          iframeElement = browserWindow.querySelector('iframe') as HTMLIFrameElement;
+        }
+      }
+
+      if (!iframeElement) {
+        console.error('Could not find iframe element for DOM update');
+        return;
+      }
+
+      const iframeDoc = iframeElement.contentDocument;
+      if (!iframeDoc) {
+        console.error('Could not access iframe document');
+        return;
+      }
+
+      const element = iframeDoc.querySelector(selector) as HTMLInputElement;
+      if (element) {
+        element.value = value;
+        
+        const changeEvent = new Event('change', { bubbles: true });
+        element.dispatchEvent(changeEvent);
+        
+        const inputEvent = new Event('input', { bubbles: true });
+        element.dispatchEvent(inputEvent);        
+      } else {
+        console.warn(`Could not find element with selector: ${selector}`);
+      }
+    } catch (error) {
+      console.error('Error updating DOM element:', error);
+    }
+  };
+
   const handleConfirm = () => {
     if (socket && selectedDate) {
       socket.emit('input:date', {
         selector,
         value: selectedDate
       });
+      
+      updateDOMElement(selector, selectedDate);
+      
       onClose();
     }
   };