DateTimePicker组件获取所选时间不正确

[13290782220]

• App 应用版本信息： 智能生活6.3.1

• @ray-js/smart-ui: "².3.2"

• 相关代码：

  Code: Select all

  <Popup
          round
          show={show}
          position="bottom"
          // customStyle={{ height: '250px' }}
          safeAreaInsetBottom={false}
          closeOnClickOverlay={false}
        >
          <View style={{ marginBottom: '60rpx' }}>
            <DateTimePicker
              cancelButtonText={Strings.getLang('dsc_cancel')}
              confirmButtonText={Strings.getLang('dsc_confirm')}
              type="time"
              value={`${hour}:${minute}`}
              onConfirm={onSaveTiming}
              onCancel={() => setShow(false)}
            />
          </View>
        </Popup>

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方法有时候不能获取到正确的时间

[xiaoqi]

我们已经收到你的提问啦 会尽快回复哦！

[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>
</>
);
}

后续我们会补充到官网内

[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>

[13290782220]

好的，我这边试试