React Native中DateTimePicker点击确定后不关闭及日期打印问题

修改后的完整代码 #

import { useState } from 'react';
import { SafeAreaView, View, Button } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const YourComponent = () => {
  const [mydate, setDate] = useState(new Date());
  const [displaymode, setMode] = useState('date');
  const [isDisplayDate, setShow] = useState(false);

  const changeSelectedDate = (event, selectedDate) => {
    // 关闭日期选择器
    setShow(false);

    if (selectedDate) {
      const currentDate = selectedDate;
      setDate(currentDate);
      // 打印选中的日期到控制台
      console.log('选中的日期:', currentDate.toString());
    }
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const displayDatepicker = () => {
    showMode('date');
  };

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Button onPress={displayDatepicker} title="Show date picker!" />
      </View>
      {isDisplayDate && (
        <DateTimePicker
          testID="dateTimePicker"
          value={mydate}
          mode={displaymode}
          is24Hour={true}
          display="default"
          onChange={changeSelectedDate}
        />
      )}
    </SafeAreaView>
  );
};

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
};

export default YourComponent;

关键修改说明 #

• 关闭选择器：在changeSelectedDate回调中首先调用setShow(false)，无论用户是确认选择还是取消操作，都会关闭日期选择器组件，解决点击确定后无法关闭的问题。
• 打印选中日期：通过判断selectedDate是否存在（用户确认选择时会有值），将选中的日期转换为字符串后打印到控制台，方便调试查看。

内容的提问来源于stack exchange，提问作者vivek kn