added input format option in date/dateRange picker and table's date/dateTime columns

Author: raheeliftikhar5

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

@@ -70,6 +70,7 @@ const commonChildren = {
   label: LabelControl,
   placeholder: withDefault(StringControl, trans("date.placeholder")),
   format: StringControl,
+  inputFormat: withDefault(StringControl, DATE_FORMAT),
   disabled: BoolCodeControl,
   onEvent: eventHandlerControl(EventOptions),
   showTime: BoolControl,
@@ -92,7 +93,7 @@ const commonChildren = {
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
 
 const datePickerProps = (props: RecordConstructorToView<typeof commonChildren>) =>
-  _.pick(props, "format", "showTime", "use12Hours", "hourStep", "minuteStep", "secondStep", "placeholder");
+  _.pick(props, "format", "inputFormat", "showTime", "use12Hours", "hourStep", "minuteStep", "secondStep", "placeholder");
 
 const timeFields = (children: CommonChildrenType, isMobile?: boolean) => [
   children.showTime.propertyView({ label: trans("date.showTime") }),
@@ -154,6 +155,7 @@ export type DateCompViewProps = Pick<
   RecordConstructorToView<typeof childrenMap>,
   | "disabled"
   | "format"
+  | "inputFormat"
   | "minDate"
   | "maxDate"
   | "suffixIcon"
@@ -279,7 +281,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
 
         {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
           <Section name={sectionNames.layout}>
-            {formatPropertyView({ children })}
+            {formatPropertyView({ children, placeholder: DATE_FORMAT })}
             {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
           </Section>
         )}

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

@@ -61,7 +61,8 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
   return useUIView(
     <DateRangeMobileUIView {...props} />,
     <RangePickerStyled
-      {...omit(props, "onChange" , "format")}
+      {...omit(props, "onChange" , "format", "inputFormat")}
+      format={props.inputFormat}
       ref={props.viewRef as any}
       value={[props.start, props.end]}
       disabledDate={(current: any) => disabledDate(current, props.minDate, props.maxDate)}

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

@@ -53,8 +53,9 @@ export const DateUIView = (props: DataUIViewProps) => {
   return useUIView(
     <DateMobileUIView {...props} />,
     <DatePickerStyled
-      {...omit(props, "format")}
+      {...omit(props, "format", "inputFormat")}
       multiple={false}
+      format={props.inputFormat}
       ref={props.viewRef as any}
       minDate={props.minDate ? dayjs(props.minDate, DateParser) : undefined}
       maxDate={props.maxDate ? dayjs(props.maxDate, DateParser) : undefined}

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx

@@ -137,15 +137,19 @@ export function formatDate(date: string, format: string) {
 const childrenMap = {
   text: StringControl,
   format: withDefault(StringControl, DATE_FORMAT),
+  inputFormat: withDefault(StringControl, DATE_FORMAT),
 };
 
+let inputFormat = DATE_FORMAT;
+
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
 
 type DateEditProps = {
   value: string;
   onChange: (value: string) => void;
   onChangeEnd: () => void;
   showTime: boolean;
+  inputFormat: string;
 };
 
 export const DateEdit = (props: DateEditProps) => {
@@ -183,6 +187,7 @@ export const DateEdit = (props: DateEditProps) => {
         nextIcon={<IconNext />}
         superNextIcon={<IconSuperNext />}
         superPrevIcon={<SuperPrevIcon />}
+        format={props.inputFormat}
         allowClear={true}
         variant="borderless"
         autoFocus
@@ -210,6 +215,7 @@ export const DateComp = (function () {
   return new ColumnTypeCompBuilder(
     childrenMap,
     (props, dispatch) => {
+      inputFormat = props.inputFormat;
       const value = props.changeValue ?? getBaseValue(props, dispatch);
       return formatDate(value, props.format);
     },
@@ -222,6 +228,7 @@ export const DateComp = (function () {
         onChange={props.onChange}
         onChangeEnd={props.onChangeEnd}
         showTime={false}
+        inputFormat={inputFormat}
       />
     ))
     .setPropertyViewFn((children) => (

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx

@@ -13,14 +13,18 @@ import { DateEdit, formatDate } from "./columnDateComp";
 const childrenMap = {
   text: StringControl,
   format: withDefault(StringControl, DATE_TIME_FORMAT),
+  inputFormat: withDefault(StringControl, DATE_TIME_FORMAT),
 };
 
+let inputFormat = DATE_TIME_FORMAT;
+
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
 
 export const DateTimeComp = (function () {
   return new ColumnTypeCompBuilder(
     childrenMap,
     (props, dispatch) => {
+      inputFormat = props.inputFormat;
       const value = props.changeValue ?? getBaseValue(props, dispatch);
       return formatDate(value, props.format);
     },
@@ -33,6 +37,7 @@ export const DateTimeComp = (function () {
         onChange={props.onChange}
         onChangeEnd={props.onChangeEnd}
         showTime={true}
+        inputFormat={inputFormat}
       />
     ))
     .setPropertyViewFn((children) => (

client/packages/lowcoder/src/comps/utils/propertyUtils.tsx

@@ -99,24 +99,49 @@ export const showLabelPropertyView = (children: { showLabel: InstanceType<typeof
   children.showLabel.propertyView({ label: trans("prop.showLabel") });
 
 export const formatPropertyView = (params: {
-  children: { format: InstanceType<typeof StringControl> };
+  children: {
+    format: InstanceType<typeof StringControl>,
+    inputFormat: InstanceType<typeof StringControl>
+  };
   placeholder?: string;
-}) =>
-  params.children.format.propertyView({
-    label: trans("date.format"),
-    placeholder: params.placeholder,
-    tooltip: (
-      <>
-        {trans("date.reference")} &nbsp;
-        <a
-          href={`${
-            language === "zh" ? "https://day.js.org/docs/zh-CN" : "https://day.js.org/docs/en"
-          }/display/format`}
-          target={"_blank"}
-          rel="noreferrer"
-        >
-          dayjs format
-        </a>
-      </>
-    ),
-  }); // FIXME: need verification
+}) => {
+  return [
+    params.children.format.propertyView({
+      label: trans("date.format"),
+      placeholder: params.placeholder,
+      tooltip: (
+        <>
+          {trans("date.reference")} &nbsp;
+          <a
+            href={`${
+              language === "zh" ? "https://day.js.org/docs/zh-CN" : "https://day.js.org/docs/en"
+            }/display/format`}
+            target={"_blank"}
+            rel="noreferrer"
+          >
+            dayjs format
+          </a>
+        </>
+      ),
+    }), // FIXME: need verification
+    params.children.inputFormat.propertyView({
+      label: trans("date.inputFormat"),
+      placeholder: params.placeholder,
+      tooltip: (
+        <>
+          {trans("date.reference")} &nbsp;
+          <a
+            href={`${
+              language === "zh" ? "https://day.js.org/docs/zh-CN" : "https://day.js.org/docs/en"
+            }/display/format`}
+            target={"_blank"}
+            rel="noreferrer"
+          >
+            dayjs format
+          </a>
+        </>
+      ),
+    })
+  ]
+}
+

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1809,6 +1809,7 @@ export const en = {
   },
   "date": {
     "format": "Format",
+    "inputFormat": "Input Format",
     "formatTip": "Support: 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD', 'Timestamp'",
     "reference": "Please Refer to",
     "showTime": "Show Time",