Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
W
WebPublic
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
前端开发小组
WebPublic
Commits
44360ed4
提交
44360ed4
authored
7月 01, 2022
作者:
钟是志
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
27737 增加功能菜单--士官生请假申请
上级
2320d4e7
隐藏空白字符变更
内嵌
并排
正在显示
1 个修改的文件
包含
36 行增加
和
29 行删除
+36
-29
MobileDate.jsx
one_stop_public/libs/MobileDate.jsx
+36
-29
没有找到文件。
one_stop_public/libs/MobileDate.jsx
浏览文件 @
44360ed4
...
@@ -2,8 +2,8 @@
...
@@ -2,8 +2,8 @@
* 2019年10月23日
* 2019年10月23日
* 移动端日期选择封装
* 移动端日期选择封装
*/
*/
import
React
,
{
Component
}
from
'react'
;
import
React
,
{
Component
}
from
'react'
;
import
{
DatePicker
,
List
,
Button
,
InputItem
,
Toast
}
from
'antd-mobile'
;
import
{
DatePicker
,
List
,
Toast
}
from
'antd-mobile'
;
import
moment
from
'moment'
;
import
moment
from
'moment'
;
export
default
class
MobileDate
extends
Component
{
export
default
class
MobileDate
extends
Component
{
...
@@ -16,12 +16,12 @@ export default class MobileDate extends Component {
...
@@ -16,12 +16,12 @@ export default class MobileDate extends Component {
};
};
}
}
triggerChange
=
(
changedValue
)
=>
{
triggerChange
=
changedValue
=>
{
// Should provide an event to pass value to Form.
// Should provide an event to pass value to Form.
const
onChange
=
this
.
props
.
onChange
;
const
onChange
=
this
.
props
.
onChange
;
// console.log(changedValue);
if
(
onChange
)
{
if
(
onChange
)
{
onChange
(
changedValue
);
onChange
(
[...
changedValue
]
);
}
}
};
};
...
@@ -29,17 +29,17 @@ export default class MobileDate extends Component {
...
@@ -29,17 +29,17 @@ export default class MobileDate extends Component {
// Should be a controlled component.
// Should be a controlled component.
if
(
'value'
in
nextProps
)
{
if
(
'value'
in
nextProps
)
{
const
value
=
nextProps
.
value
;
const
value
=
nextProps
.
value
;
this
.
setState
({
dates
:
value
});
this
.
setState
({
dates
:
value
});
}
}
}
}
handelStartChange
=
(
date
)
=>
{
handelStartChange
=
date
=>
{
const
{
dates
}
=
this
.
state
;
const
{
dates
}
=
this
.
state
;
if
(
dates
.
length
===
0
)
{
if
(
dates
.
length
===
0
)
{
dates
.
push
(
moment
(
date
.
valueOf
()));
dates
.
push
(
moment
(
date
.
valueOf
()));
}
else
{
}
else
{
if
(
dates
.
length
===
2
)
{
if
(
dates
.
length
===
2
)
{
if
(
moment
(
date
.
valueOf
()).
isAfter
(
dates
[
1
],
'second'
))
{
if
(
moment
(
date
.
valueOf
()).
isAfter
(
dates
[
1
],
'second'
))
{
Toast
.
fail
(
'结束时间必须在开始时间之后'
,
1
);
Toast
.
fail
(
'结束时间必须在开始时间之后'
,
1
);
return
false
;
return
false
;
...
@@ -49,17 +49,16 @@ export default class MobileDate extends Component {
...
@@ -49,17 +49,16 @@ export default class MobileDate extends Component {
}
}
if
(
!
(
'value'
in
this
.
props
))
{
if
(
!
(
'value'
in
this
.
props
))
{
this
.
setState
({
dates
});
this
.
setState
({
dates
});
}
}
this
.
triggerChange
(
dates
);
this
.
triggerChange
(
dates
);
};
};
handelEndChange
=
(
date
)
=>
{
handelEndChange
=
date
=>
{
const
{
dates
}
=
this
.
state
;
const
{
dates
}
=
this
.
state
;
if
(
dates
.
length
===
0
)
{
if
(
dates
.
length
===
0
)
{
dates
.
push
(
null
);
dates
.
push
(
null
);
dates
.
push
(
moment
(
date
.
valueOf
()));
dates
.
push
(
moment
(
date
.
valueOf
()));
}
else
if
(
dates
.
length
===
1
)
{
}
else
if
(
dates
.
length
===
1
)
{
if
(
dates
[
0
].
isAfter
(
moment
(
date
.
valueOf
()),
'second'
))
{
if
(
dates
[
0
].
isAfter
(
moment
(
date
.
valueOf
()),
'second'
))
{
Toast
.
fail
(
'结束时间必须在开始时间之后'
,
1
);
Toast
.
fail
(
'结束时间必须在开始时间之后'
,
1
);
...
@@ -76,25 +75,25 @@ export default class MobileDate extends Component {
...
@@ -76,25 +75,25 @@ export default class MobileDate extends Component {
dates
[
1
]
=
moment
(
date
.
valueOf
());
dates
[
1
]
=
moment
(
date
.
valueOf
());
}
}
if
(
!
(
'value'
in
this
.
props
))
{
if
(
!
(
'value'
in
this
.
props
))
{
this
.
setState
({
dates
});
this
.
setState
({
dates
});
}
}
this
.
triggerChange
(
dates
);
this
.
triggerChange
(
dates
);
};
};
MustSpan
=
()
=>
{
MustSpan
=
()
=>
{
const
{
required
}
=
this
.
props
;
const
{
required
}
=
this
.
props
;
if
(
required
)
{
if
(
required
)
{
return
<
span
style=
{
{
color
:
'red'
}
}
>
*
</
span
>;
return
<
span
style=
{
{
color
:
'red'
}
}
>
*
</
span
>;
}
else
{
}
else
{
return
null
;
return
null
;
}
}
};
};
render
()
{
render
()
{
let
{
dates
}
=
this
.
state
;
let
{
dates
}
=
this
.
state
;
const
{
format
,
showTime
}
=
this
.
props
;
const
{
format
,
showTime
}
=
this
.
props
;
let
mode
=
'datetime'
;
let
mode
=
'datetime'
;
if
(
!
showTime
)
{
if
(
!
showTime
)
{
mode
=
'date'
;
mode
=
'date'
;
}
}
const
startTime
=
dates
.
length
>
0
?
dates
[
0
]
&&
dates
[
0
].
valueOf
()
:
null
;
const
startTime
=
dates
.
length
>
0
?
dates
[
0
]
&&
dates
[
0
].
valueOf
()
:
null
;
...
@@ -108,33 +107,41 @@ export default class MobileDate extends Component {
...
@@ -108,33 +107,41 @@ export default class MobileDate extends Component {
<
DatePicker
<
DatePicker
// value={this.state.date}
// value={this.state.date}
extra=
{
extra=
{
<
span
style=
{
{
fontSize
:
14
}
}
>
<
span
style=
{
{
fontSize
:
14
}
}
>
{
!!
startTime
{
!!
startTime
?
moment
(
startTime
).
format
(
format
?
format
:
'YYYY-MM-DD HH:mm:ss'
)
?
moment
(
startTime
).
format
(
format
?
format
:
'YYYY-MM-DD HH:mm:ss'
)
:
'请选择时间'
}
:
'请选择时间'
}
</
span
>
</
span
>
}
}
locale=
{
{
okText
:
'确定'
,
dismissText
:
'取消'
}
}
locale=
{
{
okText
:
'确定'
,
dismissText
:
'取消'
,
}
}
value=
{
!!
startTime
?
new
Date
(
startTime
)
:
null
}
value=
{
!!
startTime
?
new
Date
(
startTime
)
:
null
}
format=
{
format
?
format
:
'YYYY-MM-DD HH:mm:ss'
}
format=
{
format
?
format
:
'YYYY-MM-DD HH:mm:ss'
}
mode=
{
mode
}
mode=
{
mode
}
onChange=
{
(
date
)
=>
this
.
handelStartChange
(
date
)
}
>
onChange=
{
date
=>
this
.
handelStartChange
(
date
)
}
>
<
List
.
Item
arrow=
"horizontal"
>
{
MustSpan
}
开始时间
</
List
.
Item
>
<
List
.
Item
arrow=
"horizontal"
>
{
MustSpan
}
开始时间
</
List
.
Item
>
</
DatePicker
>
</
DatePicker
>
<
DatePicker
<
DatePicker
// value={this.state.date}
// value={this.state.date}
extra=
{
extra=
{
<
span
style=
{
{
fontSize
:
14
}
}
>
<
span
style=
{
{
fontSize
:
14
}
}
>
{
!!
endTime
{
!!
endTime
?
moment
(
endTime
).
format
(
format
?
format
:
'YYYY-MM-DD HH:mm:ss'
)
?
moment
(
endTime
).
format
(
format
?
format
:
'YYYY-MM-DD HH:mm:ss'
)
:
'请选择时间'
}
:
'请选择时间'
}
</
span
>
</
span
>
}
}
value=
{
!!
endTime
?
new
Date
(
endTime
)
:
null
}
value=
{
!!
endTime
?
new
Date
(
endTime
)
:
null
}
locale=
{
{
okText
:
'确定'
,
dismissText
:
'取消'
}
}
locale=
{
{
okText
:
'确定'
,
dismissText
:
'取消'
,
}
}
mode=
{
mode
}
mode=
{
mode
}
format=
{
format
?
format
:
'YYYY-MM-DD HH:mm:ss'
}
format=
{
format
?
format
:
'YYYY-MM-DD HH:mm:ss'
}
onChange=
{
(
date
)
=>
this
.
handelEndChange
(
date
)
}
>
onChange=
{
date
=>
this
.
handelEndChange
(
date
)
}
>
<
List
.
Item
arrow=
"horizontal"
>
{
MustSpan
}
结束时间
</
List
.
Item
>
<
List
.
Item
arrow=
"horizontal"
>
{
MustSpan
}
结束时间
</
List
.
Item
>
</
DatePicker
>
</
DatePicker
>
</
div
>
</
div
>
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论