From bbe7f746c0df08335918afe68cfc245d19c88eea Mon Sep 17 00:00:00 2001
From: Faran Javed <faran.code@gmail.com>
Date: Thu, 5 Feb 2026 19:40:10 +0500
Subject: [PATCH] [Feat]: add support of multiple input formats for date
 component

---
 .../src/comps/comps/dateComp/dateCompUtil.ts      |  3 +++
 .../src/comps/comps/dateComp/dateRangeUIView.tsx  | 15 +++++----------
 .../src/comps/comps/dateComp/dateUIView.tsx       |  6 +++---
 .../lowcoder/src/comps/utils/propertyUtils.tsx    |  2 +-
 client/packages/lowcoder/src/i18n/locales/en.ts   |  1 +
 5 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
index 16bc634ed..ed0b794ec 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
+++ b/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
 }>`
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
index 65677b63b..7e0c7bd5d 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
+++ b/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]}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
index c66ac2a02..5a7e188c8 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
+++ b/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}
diff --git a/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx b/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx
index 5f65242cb..9ac0bfca8 100644
--- a/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx
+++ b/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"
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 8cbc26404..55021de78 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1953,6 +1953,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",