Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
J
jinfa-admin
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
陈智峰
jinfa-admin
Commits
a83947f5
Commit
a83947f5
authored
Jan 26, 2022
by
XieZhiXiong
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 完善时间选择逻辑
parent
9efbdedd
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
27 additions
and
13 deletions
+27
-13
index.tsx
src/components/RangeTime/index.tsx
+27
-13
No files found.
src/components/RangeTime/index.tsx
View file @
a83947f5
...
...
@@ -34,7 +34,6 @@ interface Iprops {
const
RangeTime
:
React
.
FC
<
Iprops
>
=
(
props
:
Iprops
)
=>
{
const
{
containerStyle
,
rangeTime
,
onChange
,
placeholader
,
shouldGtCurrent
,
disabled
,
showTime
}
=
props
;
const
currentDay
=
moment
();
const
endOfUnit
=
showTime
?
'second'
:
'day'
;
const
[
innerRangeTime
,
setInnerRangeTime
]
=
useState
<
{
[
key
:
string
]:
Moment
|
null
}
>
({
startTime
:
null
,
...
...
@@ -50,11 +49,24 @@ const RangeTime: React.FC<Iprops> = (props: Iprops) => {
},
[
props
.
rangeTime
]);
const
handleChange
=
(
date
:
Moment
|
null
,
dateString
:
string
,
mode
:
"startTime"
|
"endTime"
)
=>
{
const
reverseMode
=
mode
===
'startTime'
?
'endTime'
:
'startTime'
;
const
newObject
=
{
...
innerRangeTime
,
[
mode
]:
date
,
};
// 对调位置,可以省去很多复杂且不必要的判断
if
(
date
&&
newObject
[
reverseMode
])
{
if
(
mode
===
'startTime'
&&
date
>
newObject
[
reverseMode
]
!
)
{
newObject
[
mode
]
=
newObject
[
reverseMode
];
newObject
[
reverseMode
]
=
date
;
}
if
(
mode
===
'endTime'
&&
date
<
newObject
[
reverseMode
]
!
)
{
newObject
[
mode
]
=
newObject
[
reverseMode
];
newObject
[
reverseMode
]
=
date
;
}
}
if
(
onChange
)
{
onChange
?.([
newObject
.
startTime
as
unknown
as
Moment
,
newObject
.
endTime
as
unknown
as
Moment
]);
}
else
{
...
...
@@ -64,37 +76,39 @@ const RangeTime: React.FC<Iprops> = (props: Iprops) => {
const
getDisableDate
=
useCallback
((
current
:
Moment
,
mode
:
"startTime"
|
"endTime"
)
=>
{
const
reverseMode
=
mode
===
'startTime'
?
'endTime'
:
'startTime'
;
const
modeTime
:
Moment
|
null
=
innerRangeTime
[
reverseMode
]
;
const
modeTime
:
Moment
|
null
=
moment
(
innerRangeTime
[
reverseMode
])
;
// current 为当前日历上的日期, 如果返回值为true,那么表示当前日期为禁用状态
if
(
!
modeTime
)
{
if
(
shouldGtCurrent
)
{
return
current
<
currentDay
.
endOf
(
endOfUnit
)
;
if
(
!
modeTime
)
{
if
(
shouldGtCurrent
)
{
return
current
<
currentDay
;
}
return
false
;
}
if
(
mode
===
'startTime'
)
{
return
shouldGtCurrent
?
(
current
<
currentDay
.
endOf
(
endOfUnit
)
||
current
>
(
modeTime
as
Moment
).
endOf
(
endOfUnit
))
:
current
>
(
modeTime
as
Moment
).
endOf
(
endOfUnit
);
return
shouldGtCurrent
?
(
current
<
currentDay
||
current
>
modeTime
.
endOf
(
'day'
))
:
current
>
modeTime
.
endOf
(
'day'
);
}
else
{
//现在的时间要大于开始的时间, true 为禁用
return
shouldGtCurrent
?
(
current
<
currentDay
.
endOf
(
endOfUnit
)
||
current
<
(
modeTime
as
Moment
).
endOf
(
endOfUnit
))
:
current
<
(
modeTime
as
Moment
).
endOf
(
endOfUnit
);
return
shouldGtCurrent
?
(
current
<
currentDay
||
current
<
modeTime
)
:
current
<
modeTime
.
endOf
(
'day'
);
}
},
[
innerRangeTime
]);
const
disabledDateTime
=
(
current
:
Moment
,
partial
:
'start'
|
'end'
)
=>
{
const
{
startTime
}
=
innerRangeTime
;
const
hours
=
range
(
0
,
24
);
const
minutes
=
range
(
0
,
60
);
if
(
partial
===
'start'
)
{
return
{
disabledHours
:
()
=>
range
(
0
,
24
).
splice
(
0
,
moment
().
get
(
'hour'
)
),
disabledMinutes
:
()
=>
range
(
0
,
60
).
splice
(
0
,
moment
().
get
(
'minute'
)
),
disabledSeconds
:
()
=>
range
(
0
,
60
).
splice
(
0
,
moment
().
get
(
'second'
)
),
disabledHours
:
()
=>
hours
.
splice
(
0
,
current
&&
current
.
isSame
(
currentDay
,
'day'
)
?
moment
().
get
(
'hour'
)
:
0
),
disabledMinutes
:
()
=>
minutes
.
splice
(
0
,
current
&&
current
.
isSame
(
currentDay
,
'day'
)
?
moment
().
get
(
'minute'
)
:
0
),
disabledSeconds
:
()
=>
minutes
.
splice
(
0
,
current
&&
current
.
isSame
(
currentDay
,
'day'
)
?
moment
().
get
(
'second'
)
:
0
),
};
}
if
(
partial
===
'end'
)
{
return
{
disabledHours
:
()
=>
range
(
0
,
24
)
.
splice
(
0
,
startTime
?.
get
(
'hour'
)),
disabledMinutes
:
()
=>
range
(
0
,
60
)
.
splice
(
0
,
current
&&
current
.
isSame
(
startTime
,
'hour'
)
?
startTime
?.
get
(
'minute'
)
:
0
),
disabledSeconds
:
()
=>
range
(
0
,
60
).
splice
(
0
,
current
&&
current
.
isSame
(
startTime
,
'hour'
)
&&
current
.
isSame
(
startTime
,
'minute'
)
?
(
startTime
?.
get
(
'second'
)
||
0
)
+
1
:
0
),
disabledHours
:
()
=>
hours
.
splice
(
0
,
startTime
?.
get
(
'hour'
)),
disabledMinutes
:
()
=>
minutes
.
splice
(
0
,
current
&&
current
.
isSame
(
startTime
,
'hour'
)
?
startTime
?.
get
(
'minute'
)
:
0
),
disabledSeconds
:
()
=>
minutes
.
splice
(
0
,
current
&&
current
.
isSame
(
startTime
,
'hour'
)
&&
current
.
isSame
(
startTime
,
'minute'
)
?
startTime
?.
get
(
'second'
)
!
+
1
:
0
),
};
}
return
{};
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment