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

Commit3e3c39c

Browse files
added picker modes in date/date range comps
1 parent052374a commit3e3c39c

File tree

4 files changed

+60
-12
lines changed

4 files changed

+60
-12
lines changed

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

Lines changed: 55 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,13 @@ import { fixOldInputCompData } from "../textInputComp/textInputConstants";
5757

5858

5959
constEventOptions=[changeEvent,focusEvent,blurEvent]asconst;
60+
constPickerModeOptions=[
61+
{label:"Date",value:"date"},
62+
{label:"Week",value:"week"},
63+
{label:"Month",value:"month"},
64+
{label:"Quarter",value:"quarter"},
65+
{label:"Year",value:"year"},
66+
]
6067

6168
constvalidationChildren={
6269
showValidationWhenEmpty:BoolControl,
@@ -91,11 +98,12 @@ const commonChildren = {
9198
inputFieldStyle:styleControl(DateTimeStyle,'inputFieldStyle'),
9299
childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle,'childrenInputFieldStyle'),
93100
timeZone:dropdownControl(timeZoneOptions,Intl.DateTimeFormat().resolvedOptions().timeZone),
101+
pickerMode:dropdownControl(PickerModeOptions,'date'),
94102
};
95103
typeCommonChildrenType=RecordConstructorToComp<typeofcommonChildren>;
96104

97105
constdatePickerProps=(props:RecordConstructorToView<typeofcommonChildren>)=>
98-
_.pick(props,"format","inputFormat","showTime","use12Hours","hourStep","minuteStep","secondStep","placeholder");
106+
_.pick(props,"format","inputFormat","showTime","use12Hours","hourStep","minuteStep","secondStep","placeholder","pickerMode");
99107

100108
consttimeFields=(children:CommonChildrenType,isMobile?:boolean)=>[
101109
children.showTime.propertyView({label:trans("date.showTime")}),
@@ -168,6 +176,7 @@ export type DateCompViewProps = Pick<
168176
|"secondStep"
169177
|"viewRef"
170178
|"timeZone"
179+
|"pickerMode"
171180
>&{
172181
onFocus:()=>void;
173182
onBlur:()=>void;
@@ -178,6 +187,41 @@ export type DateCompViewProps = Pick<
178187
placeholder?:string|[string,string];
179188
};
180189

190+
constgetFormattedDate=(
191+
time:dayjs.Dayjs|null|undefined,
192+
showTime:boolean,
193+
pickerMode:string,
194+
)=>{
195+
letupdatedTime=undefined;
196+
if(time?.isValid()){
197+
switch(pickerMode){
198+
case'week':{
199+
updatedTime=dayjs(time).day(0);
200+
break;
201+
}
202+
case'month':{
203+
updatedTime=dayjs(time).set('date',1);
204+
break;
205+
}
206+
case'quarter':{
207+
updatedTime=dayjs(time).set('date',1);
208+
break;
209+
}
210+
case'year':{
211+
updatedTime=dayjs(time).set('date',1).set('month',1);
212+
break;
213+
}
214+
default:{
215+
updatedTime=time;
216+
break;
217+
}
218+
}
219+
}
220+
returnupdatedTime
221+
?updatedTime.format(showTime ?DATE_TIME_FORMAT :DATE_FORMAT)
222+
:"";
223+
}
224+
181225
constDatePickerTmpCmp=newUICompBuilder(childrenMap,(props)=>{
182226
constdefaultValue={ ...props.defaultValue}.value;
183227
constvalue={ ...props.value}.value;
@@ -226,9 +270,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
226270
value={tempValue?.isValid() ?tempValue :null}
227271
onChange={(time)=>{
228272
handleDateChange(
229-
time&&time.isValid()
230-
?time.format(props.showTime ?DATE_TIME_FORMAT :DATE_FORMAT)
231-
:"",
273+
getFormattedDate(time,props.showTime,props.pickerMode),
232274
props.value.onChange,
233275
props.onEvent
234276
);
@@ -255,9 +297,12 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
255297
placeholder:"2022-04-07 21:39:59",
256298
tooltip:trans("date.formatTip")
257299
})}
300+
{children.pickerMode.propertyView({
301+
label:trans("prop.pickerMode")
302+
})}
258303
{children.timeZone.propertyView({
259304
label:trans("prop.timeZone")
260-
})}
305+
})}
261306
</Section>
262307

263308
<FormDataPropertyView{...children}/>
@@ -417,12 +462,10 @@ let DateRangeTmpCmp = (function () {
417462
disabledTime={()=>disabledTime(props.minTime,props.maxTime)}
418463
onChange={(start,end)=>{
419464
props.start.onChange(
420-
start&&start.isValid()
421-
?start.format(props.showTime ?DATE_TIME_FORMAT :DATE_FORMAT)
422-
:""
465+
getFormattedDate(start,props.showTime,props.pickerMode)
423466
);
424467
props.end.onChange(
425-
end&&end.isValid() ?end.format(props.showTime ?DATE_TIME_FORMAT :DATE_FORMAT) :""
468+
getFormattedDate(end,props.showTime,props.pickerMode)
426469
);
427470
props.onEvent("change");
428471
}}
@@ -468,6 +511,9 @@ let DateRangeTmpCmp = (function () {
468511
placeholder:"2022-04-07 21:39:59",
469512
tooltip:trans("date.formatTip"),
470513
})}
514+
{children.pickerMode.propertyView({
515+
label:trans("prop.pickerMode")
516+
})}
471517
{children.timeZone.propertyView({
472518
label:trans("prop.timeZone")
473519
})}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,10 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
6161
returnuseUIView(
6262
<DateRangeMobileUIView{...props}/>,
6363
<RangePickerStyled
64-
{...omit(props,"onChange","format","inputFormat","$childrenInputFieldStyle")}
64+
{...omit(props,"onChange","format","inputFormat","pickerMode","$childrenInputFieldStyle")}
6565
format={props.inputFormat}
6666
ref={props.viewRefasany}
67+
picker={props.pickerModeasany}
6768
value={[props.start,props.end]}
6869
disabledDate={(current:any)=>disabledDate(current,props.minDate,props.maxDate)}
6970
onCalendarChange={(time:any)=>{

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const DateUIView = (props: DataUIViewProps) => {
5353
returnuseUIView(
5454
<DateMobileUIView{...props}/>,
5555
<DatePickerStyled
56-
{...omit(props,"format","inputFormat","$childrenInputFieldStyle")}
56+
{...omit(props,"format","inputFormat","pickerMode","$childrenInputFieldStyle")}
5757
multiple={false}
5858
format={props.inputFormat}
5959
ref={props.viewRefasany}
@@ -63,7 +63,7 @@ export const DateUIView = (props: DataUIViewProps) => {
6363
minuteStep={props.minuteStepasany}
6464
secondStep={props.secondStepasany}
6565
disabledDate={(current)=>disabledDate(current,props.minDate,props.maxDate)}
66-
picker={"date"}
66+
picker={props.pickerModeasany}
6767
inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
6868
placeholder={placeholder}
6969
panelRender={(panelNode)=>(

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,7 @@ export const en = {
231231
"color":"Color",
232232
"horizontalGridCells":"Horizontal Grid Cells",
233233
"timeZone":"TimeZone",
234+
"pickerMode":"Picker Mode",
234235
},
235236
"autoHeightProp":{
236237
"auto":"Auto",

0 commit comments

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