@bsol-oss/react-datatable5 12.0.0-beta.25 → 12.0.0-beta.27

package/dist/index.js

@@ -3798,11 +3798,36 @@ const DatePicker = ({ column, schema, prefix }) => {
     const colLabel = `${prefix}${column}`;
     const [open, setOpen] = React.useState(false);
     const selectedDate = watch(colLabel);
-    const formatedDate = dayjs(selectedDate).format("YYYY-MM-DD");
+    React.useEffect(() => {
+        try {
+            if (selectedDate) {
+                // Parse the selectedDate as UTC or in a specific timezone to avoid +8 hour shift
+                // For example, parse as UTC:
+                const parsedDate = dayjs.utc(selectedDate);
+                // Or if you want to parse in local timezone without shifting:
+                // const parsedDate = dayjs.tz(selectedDate, dayjs.tz.guess());
+                if (!parsedDate.isValid())
+                    return;
+                console.log(selectedDate, parsedDate, parsedDate.format(dateFormat), "dkosfp");
+                // Format according to dateFormat from schema
+                const formatted = parsedDate.format(dateFormat);
+                // Update the form value only if different to avoid loops
+                if (formatted !== selectedDate) {
+                    setValue(colLabel, formatted, {
+                        shouldValidate: true,
+                        shouldDirty: true,
+                    });
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }, [selectedDate, dateFormat, colLabel, setValue]);
     return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [jsxRuntime.jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                                 setOpen(true);
-                            }, justifyContent: "start", children: [jsxRuntime.jsx(md.MdDateRange, {}), selectedDate !== undefined ? `${formatedDate}` : ""] }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1
+                            }, justifyContent: "start", children: [jsxRuntime.jsx(md.MdDateRange, {}), selectedDate !== undefined ? `${selectedDate}` : ""] }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1
                                 // @ts-expect-error TODO: find appropriate types
                                 , { 
                                     // @ts-expect-error TODO: find appropriate types

package/dist/index.mjs

@@ -3778,11 +3778,36 @@ const DatePicker = ({ column, schema, prefix }) => {
     const colLabel = `${prefix}${column}`;
     const [open, setOpen] = useState(false);
     const selectedDate = watch(colLabel);
-    const formatedDate = dayjs(selectedDate).format("YYYY-MM-DD");
+    useEffect(() => {
+        try {
+            if (selectedDate) {
+                // Parse the selectedDate as UTC or in a specific timezone to avoid +8 hour shift
+                // For example, parse as UTC:
+                const parsedDate = dayjs.utc(selectedDate);
+                // Or if you want to parse in local timezone without shifting:
+                // const parsedDate = dayjs.tz(selectedDate, dayjs.tz.guess());
+                if (!parsedDate.isValid())
+                    return;
+                console.log(selectedDate, parsedDate, parsedDate.format(dateFormat), "dkosfp");
+                // Format according to dateFormat from schema
+                const formatted = parsedDate.format(dateFormat);
+                // Update the form value only if different to avoid loops
+                if (formatted !== selectedDate) {
+                    setValue(colLabel, formatted, {
+                        shouldValidate: true,
+                        shouldDirty: true,
+                    });
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }, [selectedDate, dateFormat, colLabel, setValue]);
     return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                                 setOpen(true);
-                            }, justifyContent: "start", children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${formatedDate}` : ""] }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1
+                            }, justifyContent: "start", children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${selectedDate}` : ""] }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1
                                 // @ts-expect-error TODO: find appropriate types
                                 , { 
                                     // @ts-expect-error TODO: find appropriate types

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "12.0.0-beta.25",
+  "version": "12.0.0-beta.27",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",