@solidstarters/solid-core-ui 1.1.70 → 1.1.72

package/src/components/core/form/fields/SolidBooleanField.tsx

@@ -1,4 +1,6 @@
 'use client';
+import { getExtensionComponent } from "@/helpers/registry";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
 import { Message } from "primereact/message";
 import { SelectButton } from "primereact/selectbutton";
 import { classNames } from "primereact/utils";
@@ -6,10 +8,9 @@ import { useEffect } from "react";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
-import { Panel } from "primereact/panel";
 import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
-import { getExtensionComponent } from "@/helpers/registry";
-import { SolidBooleanFieldWidgetProps } from "@/types/solid-core";
+
+
 
 export class SolidBooleanField implements ISolidField {
 
@@ -74,65 +75,51 @@ export class SolidBooleanField implements ISolidField {
 
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
-        const booleanOptions = ["false", "true"];
-        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
-
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
-        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-
-        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-
-        let renderMode = fieldLayoutInfo.attrs.renderMode;
-        if (!renderMode) {
-            renderMode = 'field-selectbox';
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'booleanSelectbox';
         }
-        const viewMode: string = this.fieldContext.viewMode;
-        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
-        const widgetProps = {
-            label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
+        if (!viewWidget) {
+            viewWidget = 'DefaultShortTextFormViewWidget';
         }
+        const viewMode: string = this.fieldContext.viewMode;
+
         return (
             <>
-                {viewMode === "view" &&
-                    DynamicWidget && <DynamicWidget {...widgetProps} />
-                }
-                {viewMode === "edit" && (
-                    <>
-                        {renderMode &&
-                            this.renderExtensionRenderMode(renderMode, formik)
-                        }
-                        {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                            <div className="absolute mt-1">
-                                <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                            </div>
-                        )}
-                    </>
-                )
-                }
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" &&
+                        (
+                            <>
+                                {
+                                    this.renderExtensionRenderMode(editWidget, formik)
+                                }
+                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                    <div className="absolute mt-1">
+                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                    </div>
+                                )}
+                            </>
+                        )
+                    }
+                </div>
             </>
         );
-
-
     }
 
 
-    renderExtensionRenderMode(widgetName: string, formik: FormikObject) {
-        let DynamicWidget = getExtensionComponent(widgetName);
-        if (!DynamicWidget) {
-            DynamicWidget = getExtensionComponent('field-selectbox');
-        }
-        const widgetProps: SolidBooleanFieldWidgetProps = {
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
             formik: formik,
             fieldContext: this.fieldContext,
         }
@@ -145,3 +132,138 @@ export class SolidBooleanField implements ISolidField {
 
 
 }
+
+
+
+export const DefaultBooleanFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const booleanOptions = ["false", "true"];
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
+
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+
+    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+    return (
+        <div className="relative">
+            <div className="flex flex-column gap-2 mt-4">
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label font-medium">{fieldLabel}
+                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                    </label>
+                }
+                {/* <InputText
+                    id={fieldLayoutInfo.attrs.name}
+                    className="small-input"
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    onChange={formik.handleChange}
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                /> */}
+                <SelectButton
+                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                    disabled={formDisabled || fieldDisabled}
+                    id={fieldLayoutInfo.attrs.name}
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    onChange={(e) => { formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value); console.log("value is", e.value) }} // Custom handling for boolean input
+                    value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name].toString() : "false"}
+                    options={booleanOptions}
+                    className={classNames("", {
+                        "p-invalid": isFormFieldValid(formik, "defaultValue"),
+                    })}
+
+                />
+            </div>
+            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                <div className="absolute mt-1">
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                </div>
+            )}
+        </div>
+    );
+}
+
+
+export const SolidBooleanCheckboxStyleFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || "field col-12";
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    // Set default value to false on mount
+    useEffect(() => {
+        if (formik.values[fieldLayoutInfo.attrs.name] === undefined) {
+            console.log("Setting default value:", false);
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, false);
+        }
+    }, []);
+
+    const handleChange = (e: CheckboxChangeEvent) => {
+        const newValue = e.checked; // This returns `true` or `false`
+        console.log(`${fieldLayoutInfo.attrs.name}, new value:`, newValue);
+
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, newValue === true ? 'true' : 'false');
+        formik.setTouched({ ...formik.touched, [fieldLayoutInfo.attrs.name]: true }); // Ensure Formik registers the change
+        // ✅ Check if Formik updated the value correctly
+        setTimeout(() => {
+            console.log("Formik values after update:", formik.values);
+        }, 0);
+    };
+
+    const isFormFieldValid = (formik: any, fieldName: any) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+    return (
+        <div className={className}>
+            <div className="relative">
+                <div className="flex flex-column gap-2 mt-4">
+                    {showFieldLabel !== false && (
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label font-medium">
+                            {fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        </label>
+                    )}
+
+                    <div className="flex align-items-center">
+                        <Checkbox
+                            id={fieldLayoutInfo.attrs.name}
+                            checked={formik.values[fieldLayoutInfo.attrs.name] === 'true' || formik.initialValues[fieldLayoutInfo.attrs.name] === 'true'}
+                            onChange={handleChange}
+                            disabled={formDisabled || fieldDisabled}
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            className={classNames("", {
+                                "p-invalid": isFormFieldValid(formik, fieldLayoutInfo.attrs.name),
+                            })}
+                        />
+                        <span className="ml-2">{fieldLabel || "Yes"}</span>
+                    </div>
+                </div>
+
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/core/form/fields/SolidDateField.tsx

@@ -6,6 +6,7 @@ import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "@/helpers/registry";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
 
 export class SolidDateField implements ISolidField {
 
@@ -51,68 +52,102 @@ export class SolidDateField implements ISolidField {
         const fieldLayoutInfo = this.fieldContext.field;
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const calendarRef = useRef<any>(null); // Reference for the Calendar component
-        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
 
-        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-        // const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-
-        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-        // const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-        const viewMode: string = this.fieldContext.viewMode;
-        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
-        const widgetProps = {
-            label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultDateFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultShortTextFormViewWidget';
         }
+        const viewMode: string = this.fieldContext.viewMode;
+
         return (
             <>
-                {viewMode === "view" &&
-                    <div className={className}>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </div>
-                }
-                {viewMode === "edit" && (
-                    <div className={className}>
-                        <div className="relative">
-                            <div className="flex flex-column gap-2 mt-4">
-                                {showFieldLabel != false &&
-                                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                                    </label>
-                                }
-                                <Calendar
-                                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                                    ref={calendarRef} // Attach ref to Calendar
-                                    id={fieldLayoutInfo.attrs.name}
-                                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                                    name={fieldMetadata.name}
-                                    // onChange={formik.handleChange}
-                                    onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                                    //@ts-ignore
-                                    value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                                    // dateFormat="mm/dd/yy"
-                                    // placeholder="mm/dd/yyyy hh:mm"
-                                    mask="99/99/9999 99:99"
-                                    hideOnDateTimeSelect
-                                    className=""
-                                />
-                            </div>
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" && (
+                        <>
+                            {editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik)
+                            }
                             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                                 <div className="absolute mt-1">
                                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                                 </div>
                             )}
-                        </div>
-                    </div>
-                )
-                }
+                        </>
+                    )
+                    }
+                </div>
             </>
         );
     }
+
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
+
 }
+
+
+export const DefaultDateFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const calendarRef = useRef<any>(null); // Reference for the Calendar component
+    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    // const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+
+    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    return (
+        <div className="relative">
+            <div className="flex flex-column gap-2 mt-4">
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                    </label>
+                }
+                <Calendar
+                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                    ref={calendarRef} // Attach ref to Calendar
+                    id={fieldLayoutInfo.attrs.name}
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    name={fieldMetadata.name}
+                    // onChange={formik.handleChange}
+                    onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
+                    //@ts-ignore
+                    value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
+                    // dateFormat="mm/dd/yy"
+                    // placeholder="mm/dd/yyyy hh:mm"
+                    mask="99/99/9999 99:99"
+                    hideOnDateTimeSelect
+                    className=""
+                />
+            </div>
+        </div>
+    );
+}
+

package/src/components/core/form/fields/SolidDateTimeField.tsx

@@ -6,6 +6,7 @@ import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "@/helpers/registry";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
 
 export class SolidDateTimeField implements ISolidField {
 
@@ -32,7 +33,7 @@ export class SolidDateTimeField implements ISolidField {
     }
 
     validationSchema(): Schema {
-        let schema: Yup.DateSchema<Date | null | undefined>  = Yup.date();
+        let schema: Yup.DateSchema<Date | null | undefined> = Yup.date();
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
@@ -50,68 +51,104 @@ export class SolidDateTimeField implements ISolidField {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const calendarRef = useRef<any>(null); // Reference for the Calendar component
-        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
-        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
-        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-        const viewMode: string = this.fieldContext.viewMode;
-        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
-        const widgetProps = {
-            label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultDateTimeFormEditWidget';
         }
+        if (!viewWidget) {
+            viewWidget = 'DefaultShortTextFormViewWidget';
+        }
+        const viewMode: string = this.fieldContext.viewMode;
+
         return (
             <>
-               {viewMode === "view" &&
-                    <div className={className}>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </div>
-                }
-                {viewMode === "edit" &&
-                    <div className={className}>
-                        <div className="relative">
-                            <div className="flex flex-column gap-2 mt-4">
-                                {showFieldLabel != false &&
-                                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                                    </label>
-                                }
-                                <Calendar
-                                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                                    ref={calendarRef} // Attach ref to Calendar
-                                    id={fieldLayoutInfo.attrs.name}
-                                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                                    name={fieldMetadata.name}
-                                    // onChange={formik.handleChange}
-                                    onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                                    //@ts-ignore
-                                    value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                                    // dateFormat="mm/dd/yy"
-                                    // placeholder="mm/dd/yyyy hh:mm"
-                                    mask="99/99/9999 99:99"
-                                    hideOnDateTimeSelect
-                                    showTime className=""
-                                    hourFormat="24"
-
-                                />
-                            </div>
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" && (
+                        <>
+                            {editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik)
+                            }
                             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                                 <div className="absolute mt-1">
                                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                                 </div>
                             )}
-                        </div>
-                    </div>
-                }
+                        </>
+                    )
+                    }
+                </div>
             </>
         );
     }
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
 }
+
+
+
+
+export const DefaultDateTimeFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const calendarRef = useRef<any>(null); // Reference for the Calendar component
+    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+
+    return (
+        <div className="relative">
+            <div className="flex flex-column gap-2 mt-4">
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                    </label>
+                }
+                <Calendar
+                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                    ref={calendarRef} // Attach ref to Calendar
+                    id={fieldLayoutInfo.attrs.name}
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    name={fieldMetadata.name}
+                    // onChange={formik.handleChange}
+                    onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
+                    //@ts-ignore
+                    value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
+                    // dateFormat="mm/dd/yy"
+                    // placeholder="mm/dd/yyyy hh:mm"
+                    mask="99/99/9999 99:99"
+                    hideOnDateTimeSelect
+                    showTime className=""
+                    hourFormat="24"
+
+                />
+            </div>
+
+        </div>
+    );
+}