Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit86a500a

Browse files
authored
Merge pull requestlowcoder-org#1144 from MenamAfzal/add/timeZone
[WIP] Add/time zone
2 parentsb2d7b3a +b3d587c commit86a500a

File tree

8 files changed

+605
-77
lines changed

8 files changed

+605
-77
lines changed

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

Lines changed: 270 additions & 45 deletions
Large diffs are not rendered by default.

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { default as DatePicker } from "antd/es/date-picker";
1111
import{hasIcon}from"comps/utils";
1212
import{omit}from"lodash";
1313
import{DateParser}from"@lowcoder-ee/util/dateTimeUtils";
14+
import{defaultasAntdSelect}from"antd/es/select";
15+
import{timeZoneOptions}from"./timeZone";
1416

1517
const{ RangePicker}=DatePicker;
1618

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

26+
constStyledAntdSelect=styled(AntdSelect)`
27+
width: 400px;
28+
margin: 10px 0px;
29+
.ant-select-selector {
30+
font-size: 14px;
31+
line-height: 1.5;
32+
}
33+
`;
34+
constStyledDiv=styled.div`
35+
text-align: center;
36+
`;
2437
constDateRangeMobileUIView=React.lazy(()=>
2538
import("./dateMobileUIView").then((m)=>({default:m.DateRangeMobileUIView}))
2639
);
@@ -31,6 +44,7 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
3144
placeholder?:string|[string,string];
3245
onChange:(start?:dayjs.Dayjs|null,end?:dayjs.Dayjs|null)=>void;
3346
onPanelChange:(value:any,mode:[string,string])=>void;
47+
onClickDateRangeTimeZone:(value:any)=>void
3448
}
3549

3650
exportconstDateRangeUIView=(props:DateRangeUIViewProps)=>{
@@ -44,7 +58,6 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
4458
// Use the same placeholder for both start and end if it's a single string
4559
placeholders=[props.placeholder||'Start Date',props.placeholder||'End Date'];
4660
}
47-
4861
returnuseUIView(
4962
<DateRangeMobileUIView{...props}/>,
5063
<RangePickerStyled
@@ -63,6 +76,18 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
6376
hourStep={props.hourStepasany}
6477
minuteStep={props.minuteStepasany}
6578
secondStep={props.secondStepasany}
79+
renderExtraFooter={()=>(
80+
props.timeZone==="UserChoice"&&(
81+
<StyledDiv>
82+
<StyledAntdSelect
83+
options={timeZoneOptions.filter(option=>option.value!=='UserChoice')}
84+
placeholder="Select Time Zone"
85+
defaultValue={'Etc/UTC'}
86+
onChange={props?.onClickDateRangeTimeZone}
87+
/>
88+
</StyledDiv>
89+
)
90+
)}
6691
/>
6792
);
6893
};

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,34 @@ import { default as DatePicker } from "antd/es/date-picker";
1111
importtype{DatePickerProps}from"antd/es/date-picker";
1212
importtype{Dayjs}from'dayjs';
1313
import{DateParser}from"@lowcoder-ee/util/dateTimeUtils";
14+
import{timeZoneOptions}from"./timeZone";
15+
import{defaultasAntdSelect}from"antd/es/select";
1416

1517
constDatePickerStyled=styled(DatePicker<Dayjs>)<{$style:DateTimeStyleType}>`
1618
width: 100%;
1719
box-shadow:${props=>`${props.$style.boxShadow}${props.$style.boxShadowColor}`};
1820
${(props)=>props.$style&&getStyle(props.$style)}
1921
`;
2022

23+
constStyledDiv=styled.div`
24+
width: 100%;
25+
margin: 10px 0px;
26+
`;
27+
28+
constStyledAntdSelect=styled(AntdSelect)`
29+
width: 100%;
30+
.ant-select-selector {
31+
font-size: 14px;
32+
line-height: 1.5;
33+
}
34+
`;
2135

2236
exportinterfaceDataUIViewPropsextendsDateCompViewProps{
2337
value?:DatePickerProps<Dayjs>['value'];
2438
onChange:DatePickerProps<Dayjs>['onChange'];
2539
onPanelChange:()=>void;
40+
onClickDateTimeZone:(value:any)=>void;
41+
2642
}
2743

2844
constDateMobileUIView=React.lazy(()=>
@@ -48,6 +64,18 @@ export const DateUIView = (props: DataUIViewProps) => {
4864
picker={"date"}
4965
inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
5066
placeholder={placeholder}
67+
renderExtraFooter={()=>(
68+
props.timeZone==="UserChoice"&&(
69+
<StyledDiv>
70+
<StyledAntdSelect
71+
options={timeZoneOptions.filter(option=>option.value!=='UserChoice')}
72+
placeholder="Select Time Zone"
73+
defaultValue={'Etc/UTC'}
74+
onChange={props.onClickDateTimeZone}
75+
/>
76+
</StyledDiv>
77+
)
78+
)}
5179
/>
5280
);
5381
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp