如何基于react-native-modal-datetime-picker实现日期时间显示功能？

要满足「未选择时显示当前日期时间，选择完成后显示选中时间」的需求，你需要对现有代码做以下3处调整：

• 初始化selectedDate为当前日期
• 在确认选择时更新selectedDate状态
• 格式化日期时间的显示格式（避免直接输出原始Date对象）

修改后的完整代码 #

import DateTimePickerModal from "react-native-modal-datetime-picker";
import { useState } from "react";
import { View, Button, Text, Alert } from "react-native";

// 格式化日期为YYYY-MM-DD HH:mm:ss格式
const formatDateTime = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const YourComponent = () => {
  const [pickerMode, setPickerMode] = useState(false);
  // 初始化selectedDate为当前日期时间
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <View style={style.root}>
      <Button title="Show DateTime Picker" onPress={() => setPickerMode(true)} />
      <DateTimePickerModal
        isVisible={pickerMode}
        mode="datetime"
        onConfirm={(date) => {
          setPickerMode(false);
          // 更新选中的日期时间
          setSelectedDate(date);
          Alert.alert(`已选择：${formatDateTime(date)}`)
        }}
        onCancel={() => setPickerMode(false)}
      />
      {/* 格式化显示日期时间 */}
      <Text>selected date time is: {formatDateTime(selectedDate)}</Text>
    </View>
  );
};

export default YourComponent;

关键修改说明 #

1. 初始状态设置：将selectedDate的初始值设为new Date()，确保组件加载时直接显示当前时间
2. 确认选择逻辑：在onConfirm回调中调用setSelectedDate(date)，把用户选中的时间同步到状态中
3. 日期格式化：新增formatDateTime函数，将原始Date对象转换为可读性更强的字符串格式，避免显示杂乱的原始日期字符串

内容的提问来源于stack exchange，提问作者John Ocean