Page 1 of 1
DateTimePicker组件获取所选时间不正确
Posted: 2025年 Mar 20日 19:47
by 13290782220
Code: Select all
const onSaveTiming = useCallback(event => {
const { detail } = event;
const [hour, minute] = detail.split(':');
setTime({
hour: parseInt(trim(hour), 10),
minute: parseInt(trim(minute), 10),
});
setShow(false);
}, []);
- 问题描述(复现步骤):DateTimePicker组件的onConfirm方法和onInput方法有时候不能获取到正确的时间
Re: DateTimePicker组件获取所选时间不正确
Posted: 2025年 Mar 21日 10:27
by xiaoqi
Re: DateTimePicker组件获取所选时间不正确
Posted: 2025年 Mar 21日 11:14
by xiaoqi
有可能是因为你动画还没执行完 你就点击确认了 可以使用 onAnimationStart, onAnimationEnd事件做一个禁用确认效果
import React, { useCallback, useState } from 'react';
import { Cell, DateTimePicker, Popup } from '@ray-js/smart-ui';
import { View } from '@ray-js/ray';
export default function Demo() {
const [show, setShow] = React.useState(false);
const showBasic = () => setShow(true);
const [disabled, setDisabled] = useState(false);
const [time, setTime] = useState({
hour: 10,
minute: 0,
});
const onSaveTiming = useCallback(
event => {
if (disabled) return;
const { detail } = event;
const [hour, minute] = detail.split(':');
setTime({
hour: parseInt(hour.trim(), 10),
minute: parseInt(minute.trim(), 10),
});
setShow(false);
},
[disabled]
);
return (
<>
<Cell title="点击弹框" isLink onClick={showBasic}>
{time.hour}:{time.minute}
</Cell>
<Popup
round
show={show}
position="bottom"
safeAreaInsetBottom={false}
closeOnClickOverlay={false}
>
<View style={{ marginBottom: '60rpx' }}>
<DateTimePicker
type="time"
onAnimationStart={() => setDisabled(true)}
onAnimationEnd={() => setDisabled(false)}
value={${time.hour}:${time.minute}
}
onConfirm={onSaveTiming}
onCancel={() => setShow(false)}
/>
</View>
</Popup>
</>
);
}
后续我们会补充到官网内
Re: DateTimePicker组件获取所选时间不正确
Posted: 2025年 Mar 21日 11:39
by xiaoqi
对了 你有取消的逻辑 可能要修改一下 参数,当show为false的时候 设置value 为 -1:00 这样到时候你在次打卡的时候 就可以定位到当前时间的位置
<Popup
round
show={show}
position="bottom"
safeAreaInsetBottom={false}
closeOnClickOverlay={false}
>
<View style={{ marginBottom: '60rpx' }}>
<DateTimePicker
type="time"
onAnimationStart={onAnimationStart}
onAnimationEnd={onAnimationEnd}
value={show ? ${time.hour}:${time.minute}
: -1:00
}
onConfirm={onSaveTiming}
onCancel={() => setShow(false)}
/>
</View>
</Popup>
Re: DateTimePicker组件获取所选时间不正确
Posted: 2025年 Mar 21日 14:22
by 13290782220