Sep 5, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 5, 2024 · Sep 5, 2024
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
 import { hasIcon } from "comps/utils";
 import { omit } from "lodash";
 import { DateParser } from "@lowcoder-ee/util/dateTimeUtils";
 import { default as AntdSelect } from "antd/es/select";
 import { timeZoneOptions } from "./timeZone";

 const { RangePicker } = DatePicker;

  ${(props) => props.$style && getStyle(props.$style)}
 `;

 const StyledAntdSelect = styled(AntdSelect)`
  width: 400px;
  margin: 10px 0px;
  .ant-select-selector {
    font-size: 14px;
    line-height: 1.5;
  }
 `;
 const StyledDiv = styled.div`
  text-align: center;
 `;
 const DateRangeMobileUIView = React.lazy(() =>
  import("./dateMobileUIView").then((m) => ({ default: m.DateRangeMobileUIView }))
 );
  placeholder?: string | [string, string];
  onChange: (start?: dayjs.Dayjs | null, end?: dayjs.Dayjs | null) => void;
  onPanelChange: (value: any, mode: [string, string]) => void;
  onClickDateRangeTimeZone:(value:any)=>void
 }

 export const DateRangeUIView = (props: DateRangeUIViewProps) => {
    // 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
      hourStep={props.hourStep as any}
      minuteStep={props.minuteStep as any}
      secondStep={props.secondStep as any}
      renderExtraFooter={() => (
        props.timeZone === "UserChoice" && (
          <StyledDiv>
            <StyledAntdSelect
              options={timeZoneOptions.filter(option => option.value !== 'UserChoice')}
              placeholder="Select Time Zone"
              defaultValue={'Etc/UTC'}
              onChange={props?.onClickDateRangeTimeZone}
              />
          </StyledDiv>
        )
      )}
    />
  );
 };
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
 import type { DatePickerProps } from "antd/es/date-picker";
 import type { Dayjs } from 'dayjs';
 import { DateParser } from "@lowcoder-ee/util/dateTimeUtils";
 import { timeZoneOptions } from "./timeZone";
 import { default as AntdSelect } from "antd/es/select";

 const DatePickerStyled = styled(DatePicker<Dayjs>)<{ $style: DateTimeStyleType }>`
  width: 100%;
  box-shadow: ${props=>`${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
  ${(props) => props.$style && getStyle(props.$style)}
 `;

 const StyledDiv = styled.div`
  width: 100%;
  margin: 10px 0px;
 `;

 const StyledAntdSelect = styled(AntdSelect)`
  width: 100%;
  .ant-select-selector {
    font-size: 14px;
    line-height: 1.5;
  }
 `;

 export interface DataUIViewProps extends DateCompViewProps {
  value?: DatePickerProps<Dayjs>['value'];
  onChange: DatePickerProps<Dayjs>['onChange'];
  onPanelChange: () => void;
  onClickDateTimeZone:(value:any)=>void;

 }

 const DateMobileUIView = React.lazy(() =>
      picker={"date"}
      inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
      placeholder={placeholder}
      renderExtraFooter={()=>(
        props.timeZone === "UserChoice" && (
          <StyledDiv>
            <StyledAntdSelect
              options={timeZoneOptions.filter(option => option.value !== 'UserChoice')}
              placeholder="Select Time Zone"
              defaultValue={'Etc/UTC'}
              onChange={props.onClickDateTimeZone}
            />
          </StyledDiv>
        )
      )}
    />
  );
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,6 +11,8 @@ import { default as DatePicker } from "antd/es/date-picker";
		import { hasIcon } from "comps/utils";
		import { omit } from "lodash";
		import { DateParser } from "@lowcoder-ee/util/dateTimeUtils";
		import { default as AntdSelect } from "antd/es/select";
		import { timeZoneOptions } from "./timeZone";

		const { RangePicker } = DatePicker;

Expand All		@@ -21,6 +23,17 @@ const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType}>`
		${(props) => props.$style && getStyle(props.$style)}
		`;

		const StyledAntdSelect = styled(AntdSelect)`
		width: 400px;
		margin: 10px 0px;
		.ant-select-selector {
		font-size: 14px;
		line-height: 1.5;
		}
		`;
		const StyledDiv = styled.div`
		text-align: center;
		`;
		const DateRangeMobileUIView = React.lazy(() =>
		import("./dateMobileUIView").then((m) => ({ default: m.DateRangeMobileUIView }))
		);
Expand All		@@ -31,6 +44,7 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
		placeholder?: string \| [string, string];
		onChange: (start?: dayjs.Dayjs \| null, end?: dayjs.Dayjs \| null) => void;
		onPanelChange: (value: any, mode: [string, string]) => void;
		onClickDateRangeTimeZone:(value:any)=>void
		}

		export const DateRangeUIView = (props: DateRangeUIViewProps) => {
Expand All		@@ -44,7 +58,6 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
		// 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
Expand All		@@ -63,6 +76,18 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
		hourStep={props.hourStep as any}
		minuteStep={props.minuteStep as any}
		secondStep={props.secondStep as any}
		renderExtraFooter={() => (
		props.timeZone === "UserChoice" && (
		<StyledDiv>
		<StyledAntdSelect
		options={timeZoneOptions.filter(option => option.value !== 'UserChoice')}
		placeholder="Select Time Zone"
		defaultValue={'Etc/UTC'}
		onChange={props?.onClickDateRangeTimeZone}
		/>
		</StyledDiv>
		)
		)}
		/>
		);
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,18 +11,34 @@ import { default as DatePicker } from "antd/es/date-picker";
		import type { DatePickerProps } from "antd/es/date-picker";
		import type { Dayjs } from 'dayjs';
		import { DateParser } from "@lowcoder-ee/util/dateTimeUtils";
		import { timeZoneOptions } from "./timeZone";
		import { default as AntdSelect } from "antd/es/select";

		const DatePickerStyled = styled(DatePicker<Dayjs>)<{ $style: DateTimeStyleType }>`
		width: 100%;
		box-shadow: ${props=>`${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
		${(props) => props.$style && getStyle(props.$style)}
		`;

		const StyledDiv = styled.div`
		width: 100%;
		margin: 10px 0px;
		`;

		const StyledAntdSelect = styled(AntdSelect)`
		width: 100%;
		.ant-select-selector {
		font-size: 14px;
		line-height: 1.5;
		}
		`;

		export interface DataUIViewProps extends DateCompViewProps {
		value?: DatePickerProps<Dayjs>['value'];
		onChange: DatePickerProps<Dayjs>['onChange'];
		onPanelChange: () => void;
		onClickDateTimeZone:(value:any)=>void;

		}

		const DateMobileUIView = React.lazy(() =>
Expand All		@@ -48,6 +64,18 @@ export const DateUIView = (props: DataUIViewProps) => {
		picker={"date"}
		inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
		placeholder={placeholder}
		renderExtraFooter={()=>(
		props.timeZone === "UserChoice" && (
		<StyledDiv>
		<StyledAntdSelect
		options={timeZoneOptions.filter(option => option.value !== 'UserChoice')}
		placeholder="Select Time Zone"
		defaultValue={'Etc/UTC'}
		onChange={props.onClickDateTimeZone}
		/>
		</StyledDiv>
		)
		)}
		/>
		);
		};