Merge pull request #2129 from iamfaran/feat/date-component-mask

[Feat]: add support of multiple input formats for date component

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts

@@ -171,6 +171,9 @@ export const getMobileStyle = (style: DateTimeStyleType) =>
 
 export const dateRefMethods = refMethods<CommonPickerMethods>([focusMethod, blurMethod]);
 
+export const parseInputFormats = (inputFormat?: string): string | string[] => 
+  inputFormat?.includes(',') ? inputFormat.split(',').map(f => f.trim()) : inputFormat || '';
+
 export const StyledPickerPanel = styled.div<{
   $style: ChildrenMultiSelectStyleType
 }>`

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

@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 import type { DateCompViewProps } from "./dateComp";
-import { disabledDate, getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
+import { disabledDate, getStyle, StyledPickerPanel, parseInputFormats } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
 import React, { useContext } from "react";
@@ -68,20 +68,15 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
 
 export const DateRangeUIView = (props: DateRangeUIViewProps) => {
   const editorState = useContext(EditorContext);
+  const placeholders: [string, string] = Array.isArray(props.placeholder) 
+    ? props.placeholder 
+    : [props.placeholder || 'Start Date', props.placeholder || 'End Date'];
 
-  // Extract or compute the placeholder values
-  let placeholders: [string, string];
-  if (Array.isArray(props.placeholder)) {
-    placeholders = props.placeholder;
-  } else {
-    // Use the same placeholder for both start and end if it's a single string
-    placeholders = [props.placeholder || 'Start Date', props.placeholder || 'End Date'];
-  }
   return useUIView(
     <DateRangeMobileUIView {...props} />,
     <RangePickerStyled
       {...omit(props, "onChange" , "format", "inputFormat", "pickerMode", "$childrenInputFieldStyle")}
-      format={props.inputFormat}
+      format={parseInputFormats(props.inputFormat)}
       ref={props.viewRef as any}
       picker={props.pickerMode as any}
       value={[props.start, props.end]}

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

@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 import type { DateCompViewProps } from "./dateComp";
-import { disabledDate, getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
+import { disabledDate, getStyle, StyledPickerPanel, parseInputFormats } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
 import React, { useContext } from "react";
@@ -67,15 +67,15 @@ const DateMobileUIView = React.lazy(() =>
 
 export const DateUIView = (props: DataUIViewProps) => {
   const editorState = useContext(EditorContext);
-
   const placeholder = Array.isArray(props.placeholder) ? props.placeholder[0] : props.placeholder;
+
   return useUIView(
     <DateMobileUIView {...props} />,
     <DatePickerStyled
       {...omit(props, "format", "inputFormat", "pickerMode", "$childrenInputFieldStyle")}
       $disabledStyle={props.$disabledStyle}
       multiple={false}
-      format={props.inputFormat}
+      format={parseInputFormats(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/utils/propertyUtils.tsx

@@ -135,7 +135,7 @@ export const formatPropertyView = (params: {
       placeholder: params.placeholder,
       tooltip: (
         <>
-          {trans("date.reference")} &nbsp;
+          {trans("date.inputFormatTip")} &nbsp;
           <a
             href={`${
               language === "zh" ? "https://day.js.org/docs/zh-CN" : "https://day.js.org/docs/en"

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

@@ -1971,6 +1971,7 @@ export const en = {
     "format": "Format",
     "inputFormat": "Input Format",
     "formatTip": "Support: 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD', 'Timestamp'",
+    "inputFormatTip": "Supports multiple formats separated by commas (e.g., 'MM/DD/YYYY, MMDDYYYY, YYYY-MM-DD'). First format is used for display. See",
     "reference": "Please Refer to",
     "showTime": "Show Time",
     "start": "Start Date",