added input format option for time/time range comps

Author: raheeliftikhar5

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

@@ -73,6 +73,7 @@ const commonChildren = {
   label: LabelControl,
   placeholder: withDefault(StringControl, trans("time.placeholder")),
   format: StringControl,
+  inputFormat: withDefault(StringControl, TIME_FORMAT),
   disabled: BoolCodeControl,
   onEvent: eventHandlerControl(EventOptions),
   showTime: BoolControl,
@@ -95,7 +96,7 @@ const commonChildren = {
 };
 
 const timePickerComps = (props: RecordConstructorToView<typeof commonChildren>) =>
-  _.pick(props, "format", "use12Hours", "minuteStep", "secondStep", "placeholder");
+  _.pick(props, "format", "inputFormat", "use12Hours", "minuteStep", "secondStep", "placeholder");
 
 /* const commonBasicSection = (children: RecordConstructorToComp<typeof commonChildren>) => [
   formatPropertyView({ children }),
@@ -141,7 +142,7 @@ type secondStepType =  TimePickerProps['secondStep'];
 
 export type TimeCompViewProps = Pick<
   RecordConstructorToView<typeof childrenMap>,
-  "disabled" | "use12Hours" | "format" | "viewRef"
+  "disabled" | "use12Hours" | "format" | "inputFormat" | "viewRef"
 > & Pick<
   TimePickerProps, "hourStep" | "minuteStep" | "secondStep"
 > & {
@@ -252,7 +253,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
       {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()}
       {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
         <Section name={sectionNames.layout}>
-          {children.format.propertyView({ label: trans("time.format") })}
+          {formatPropertyView({ children, placeholder: TIME_FORMAT })}
           {children.placeholder.propertyView({ label: trans("time.placeholderText") })}
         </Section>
       )}
@@ -428,7 +429,7 @@ const TimeRangeTmpCmp = (function () {
         {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()}
         {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
           <Section name={sectionNames.layout}>
-            {children.format.propertyView({ label: trans("time.format") })}
+            {formatPropertyView({ children, placeholder: TIME_FORMAT })}
             {children.placeholder.propertyView({ label: trans("time.placeholderText") })}
           </Section>
         )}

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

@@ -56,13 +56,14 @@ export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {
   return useUIView(
     <TimeRangeMobileUIView {...props} />,
     <RangePickerStyled
-      {...omit(props, "onChange", "format")}
+      {...omit(props, "onChange", "format", "inputFormat")}
       value={[props.start, props.end]}
       order={true}
       hideDisabledOptions
       onCalendarChange={(time: any) => {
         props.onChange(time?.[0], time?.[1]);
       }}
+      format={props.inputFormat}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
       placeholder={placeholders}

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

@@ -44,9 +44,10 @@ export const TimeUIView = (props: TimeUIViewProps) => {
   return useUIView(
     <TimeMobileUIView {...props} />,
     <TimePickerStyled
-      {...omit(props, "format", "$childrenInputFieldStyle")}
+      {...omit(props, "format", "inputFormat", "$childrenInputFieldStyle")}
       ref={props.viewRef}
       hideDisabledOptions
+      format={props.inputFormat}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       placeholder={placeholder}
       panelRender={(panelNode) => (