@bsol-oss/react-datatable5 12.0.0-beta.26 → 12.0.0-beta.28

package/dist/index.d.ts

@@ -470,6 +470,7 @@ interface CustomJSONSchema7 extends JSONSchema7 {
         formContext: UseFormReturn;
     }) => ReactNode;
     dateFormat?: string;
+    displayDateFormat?: string;
 }
 
 interface FormRootProps<TData extends FieldValues> {

package/dist/index.js

@@ -30,6 +30,7 @@ var reactI18next = require('react-i18next');
 var axios = require('axios');
 var reactHookForm = require('react-hook-form');
 var dayjs = require('dayjs');
+var utc = require('dayjs/plugin/utc');
 var ti = require('react-icons/ti');
 
 function _interopNamespaceDefault(e) {
@@ -3790,37 +3791,46 @@ const PopoverRoot = react.Popover.Root;
 const PopoverBody = react.Popover.Body;
 const PopoverTrigger = react.Popover.Trigger;
 
+dayjs.extend(utc);
 const DatePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow, dateFormat = "YYYY-MM-DD[T]HH:mm:ss[Z]", } = schema;
+    const { required, gridColumn, gridRow, displayDateFormat = "YYYY-MM-DD", dateFormat = "YYYY-MM-DD[T]HH:mm:ss[Z]", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const [open, setOpen] = React.useState(false);
     const selectedDate = watch(colLabel);
-    const formatedDate = dayjs(selectedDate).format("YYYY-MM-DD");
+    const displayDate = dayjs.utc(selectedDate).format(displayDateFormat);
     React.useEffect(() => {
-        if (selectedDate) {
-            // Parse the selectedDate with dayjs
-            const parsedDate = dayjs(selectedDate);
-            // If invalid date, do nothing
-            if (!parsedDate.isValid())
-                return;
-            // 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,
-                });
+        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 ? `${displayDate}` : ""] }) }), 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
@@ -4861,12 +4871,13 @@ const CustomViewer = ({ column, schema, prefix }) => {
 const DateViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = schema;
+    const { required, gridColumn, gridRow, displayDateFormat = "YYYY-MM-DD", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const selectedDate = watch(colLabel);
+    const displayDate = dayjs.utc(selectedDate).format(displayDateFormat);
     return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? selectedDate : ""] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
+        gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? displayDate : ""] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
 };
 
 const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {

package/dist/index.mjs

@@ -29,6 +29,7 @@ import { useTranslation } from 'react-i18next';
 import axios from 'axios';
 import { FormProvider, useFormContext, useForm as useForm$1 } from 'react-hook-form';
 import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import { TiDeleteOutline } from 'react-icons/ti';
 
 const DataTableContext = createContext({
@@ -3770,37 +3771,46 @@ const PopoverRoot = Popover.Root;
 const PopoverBody = Popover.Body;
 const PopoverTrigger = Popover.Trigger;
 
+dayjs.extend(utc);
 const DatePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow, dateFormat = "YYYY-MM-DD[T]HH:mm:ss[Z]", } = schema;
+    const { required, gridColumn, gridRow, displayDateFormat = "YYYY-MM-DD", dateFormat = "YYYY-MM-DD[T]HH:mm:ss[Z]", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const [open, setOpen] = useState(false);
     const selectedDate = watch(colLabel);
-    const formatedDate = dayjs(selectedDate).format("YYYY-MM-DD");
+    const displayDate = dayjs.utc(selectedDate).format(displayDateFormat);
     useEffect(() => {
-        if (selectedDate) {
-            // Parse the selectedDate with dayjs
-            const parsedDate = dayjs(selectedDate);
-            // If invalid date, do nothing
-            if (!parsedDate.isValid())
-                return;
-            // 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,
-                });
+        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 ? `${displayDate}` : ""] }) }), 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
@@ -4841,12 +4851,13 @@ const CustomViewer = ({ column, schema, prefix }) => {
 const DateViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = schema;
+    const { required, gridColumn, gridRow, displayDateFormat = "YYYY-MM-DD", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const selectedDate = watch(colLabel);
+    const displayDate = dayjs.utc(selectedDate).format(displayDateFormat);
     return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxs(Text, { children: [" ", selectedDate !== undefined ? selectedDate : ""] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
+        gridRow, children: [jsxs(Text, { children: [" ", selectedDate !== undefined ? displayDate : ""] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
 };
 
 const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {

package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts

@@ -21,6 +21,7 @@ export interface CustomJSONSchema7 extends JSONSchema7 {
         formContext: UseFormReturn;
     }) => ReactNode;
     dateFormat?: string;
+    displayDateFormat?: string;
 }
 export interface TagPickerProps {
     column: string;

package/package.json

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