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([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( , export const DateUIView = (props: DataUIViewProps) => { const editorState = useContext(EditorContext); - const placeholder = Array.isArray(props.placeholder) ? props.placeholder[0] : props.placeholder; + return useUIView( , - {trans("date.reference")}   + {trans("date.inputFormatTip")}