set/read dataRange and timeRange data using form

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx

@@ -286,6 +286,7 @@ export const dateRangeControl = (function () {
   const childrenMap = {
     start: stringExposingStateControl("start"),
     end: stringExposingStateControl("end"),
+    ...formDataChildren,
     ...commonChildren,
   };
 
@@ -367,6 +368,8 @@ export const dateRangeControl = (function () {
               tooltip: trans("date.formatTip"),
             })}
           </Section>
+          
+          <FormDataPropertyView {...children} />
 
           {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
             <><Section name={sectionNames.validation}>
@@ -572,4 +575,21 @@ DateRangeComp = withMethodExposing(DateRangeComp, [
       comp.children.end.getView().reset();
     },
   },
+  {
+    method: {
+      name: "setRange",
+      params: [],
+    },
+    execute: (comp, values) => {
+      if (values.length !== 1) {
+        return Promise.reject(trans("formComp.valuesLengthError"));
+      }
+      const data = values[0] as { start: string, end: string };
+      if (typeof data !== "object" || data === null || Array.isArray(data) || !data.hasOwnProperty('start') || !data.hasOwnProperty('end')) {
+        return Promise.reject(trans("formComp.valueTypeError"));
+      }
+      comp.children.start.getView().onChange(data.start);
+      comp.children.end.getView().onChange(data.end);
+    },
+  },
 ]);

client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx

@@ -251,6 +251,7 @@ export const timeRangeControl = (function () {
   const childrenMap = {
     start: stringExposingStateControl("start"),
     end: stringExposingStateControl("end"),
+    ...formDataChildren,
     ...commonChildren,
   };
 
@@ -319,6 +320,8 @@ export const timeRangeControl = (function () {
             tooltip: trans("time.formatTip"),
           })}
         </Section>
+        
+        <FormDataPropertyView {...children} />
 
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
           <><Section name={sectionNames.validation}>
@@ -472,4 +475,21 @@ TimeRangeComp = withMethodExposing(TimeRangeComp, [
       comp.children.end.getView().reset();
     },
   },
+  {
+    method: {
+      name: "setRange",
+      params: [],
+    },
+    execute: (comp, values) => {
+      if (values.length !== 1) {
+        return Promise.reject(trans("formComp.valuesLengthError"));
+      }
+      const data = values[0] as { start: string, end: string };
+      if (typeof data !== "object" || data === null || Array.isArray(data) || !data.hasOwnProperty('start') || !data.hasOwnProperty('end')) {
+        return Promise.reject(trans("formComp.valueTypeError"));
+      }
+      comp.children.start.getView().onChange(data.start);
+      comp.children.end.getView().onChange(data.end);
+    },
+  },
 ]);

client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx

@@ -321,6 +321,7 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
   setData(data: JSONObject, initialData?: JSONObject) {
     // For the properties, first find in data, then initialData, subcomponent default value (resetValue), empty value (clearValue)
     const newData = { ...(initialData ?? this.children.initialData.getView()), ...data };
+
     return this.runMethodOfItems(
       {
         name: "setValue",
@@ -331,8 +332,19 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
           return value !== undefined ? [value as EvalParamType] : undefined;
         },
       },
+      {
+        name: "setRange",
+        getParams: (t) => {
+          // use component name when formDataKey is empty
+          const key = t.children.comp.children.formDataKey?.getView() || t.children.name.getView();
+          const value = newData[key] ? newData[key] : undefined;
+          return value !== undefined ? [value as EvalParamType] : undefined;
+        },
+      },
       { name: "resetValue" },
-      { name: "clearValue" }
+      { name: "resetAll" },
+      { name: "clearValue" },
+      { name: "clearAll" }
     );
   }
   reset() {
@@ -443,10 +455,24 @@ export const FormComp = withExposingConfigs(FormTmpComp, [
     func: (input) => {
       const data: Record<string, unknown> = {};
       Object.entries(input.container).forEach(([name, value]) => {
+
         const exposingValues = value as any;
         if (exposingValues?.hasOwnProperty("formDataKey")) {
           // use component name when formDataKey is empty
-          data[exposingValues["formDataKey"] || name] = exposingValues["value"];
+          let inputValue = exposingValues['value'];
+          // for timeRange/dateRange we don't have value
+          // instead we have start and end
+          if (
+            !inputValue
+            && exposingValues?.hasOwnProperty('start')
+            && exposingValues?.hasOwnProperty('end')
+          ) {
+            inputValue = {
+              start: exposingValues['start'],
+              end: exposingValues['end'],
+            }
+          }
+          data[exposingValues["formDataKey"] || name] = inputValue;
         }
       });
       return data;