如何使用react-native-modal-datetime-picker在单个弹窗中同时展示日历和手动输入时间的文本框？

嘿，我完全懂你想要的那种流畅UX——一个弹窗里同时搞定日历选日期和手动输时间，不用分两步跳来跳去对吧？可惜react-native-modal-datetime-picker默认的datetime模式确实是强制分两步的，不管你设置display="inline"还是其他参数，它底层依赖的iOS/Android原生DateTimePicker组件本身就没提供这种同时展示的样式。不过咱们有几个可行的解决办法：

方案一：自定义弹窗（最推荐，灵活可控） #

咱们可以自己封装一个Modal，把react-native-modal-datetime-picker（只启用日期选择模式）和手动输入时间的TextInput放在同一个弹窗里，这样用户就能在同一个界面完成日期选择和时间输入了。

下面是一个简单的实现示例：

import React, { useState } from 'react';
import { Modal, View, TextInput, Button, StyleSheet, Text } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';

const CombinedDateTimePicker = ({ isVisible, onCancel, onConfirm }) => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [timeInput, setTimeInput] = useState('');
  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);

  // 打开日期选择器
  const showDatePicker = () => setIsDatePickerVisible(true);
  const hideDatePicker = () => setIsDatePickerVisible(false);

  // 确认日期选择
  const handleDateConfirm = (date) => {
    setSelectedDate(date);
    hideDatePicker();
  };

  // 验证时间输入格式（HH:mm）
  const validateTime = (time) => {
    const regex = /^([01]\d|2[0-3]):([0-5]\d)$/;
    return regex.test(time);
  };

  // 合并日期和时间，触发确认回调
  const handleFinalConfirm = () => {
    if (!validateTime(timeInput)) {
      alert('请输入正确的时间格式（HH:mm）');
      return;
    }

    const [hours, minutes] = timeInput.split(':').map(Number);
    const finalDate = new Date(selectedDate);
    finalDate.setHours(hours);
    finalDate.setMinutes(minutes);

    onConfirm(finalDate);
    onCancel();
  };

  return (
    <Modal
      visible={isVisible}
      animationType="slide"
      onRequestClose={onCancel}
      transparent
    >
      <View style={styles.modalContainer}>
        <View style={styles.modalContent}>
          <Text style={styles.title}>选择日期和时间</Text>
          
          {/* 日期选择区域 */}
          <Button title="选择日期" onPress={showDatePicker} />
          <Text style={styles.selectedDateText}>
            已选日期：{selectedDate.toLocaleDateString()}
          </Text>
          <DateTimePickerModal
            isVisible={isDatePickerVisible}
            mode="date"
            onConfirm={handleDateConfirm}
            onCancel={hideDatePicker}
            textColor="#00C47A"
            minimumDate={new Date()}
          />

          {/* 时间输入区域 */}
          <Text style={styles.label}>手动输入时间（HH:mm）</Text>
          <TextInput
            style={styles.timeInput}
            value={timeInput}
            onChangeText={setTimeInput}
            placeholder="例如：14:30"
            keyboardType="numeric"
            maxLength={5}
          />

          {/* 操作按钮 */}
          <View style={styles.buttonContainer}>
            <Button title="取消" onPress={onCancel} />
            <Button title="确认" onPress={handleFinalConfirm} />
          </View>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modalContent: {
    width: '80%',
    padding: 20,
    backgroundColor: 'white',
    borderRadius: 10,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  selectedDateText: {
    marginVertical: 10,
    textAlign: 'center',
  },
  label: {
    marginTop: 20,
    marginBottom: 8,
  },
  timeInput: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    padding: 8,
    fontSize: 16,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 20,
  },
});

// 使用示例
const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => setIsModalVisible(true);
  const hideModal = () => setIsModalVisible(false);

  const handleConfirm = (date) => {
    console.log('最终选择的日期时间：', date);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="打开日期时间选择器" onPress={showModal} />
      <CombinedDateTimePicker
        isVisible={isModalVisible}
        onCancel={hideModal}
        onConfirm={handleConfirm}
      />
    </View>
  );
};

export default App;

这个自定义组件的好处是完全可控，你可以根据自己的需求调整布局、样式，甚至添加时间输入的自动格式化（比如输入数字后自动补冒号）。

方案二：修改库源码（不推荐） #

如果你实在不想自定义，也可以尝试修改react-native-modal-datetime-picker的源码，把日期选择器和时间输入框整合到同一个Modal里。但这种方法有个很大的问题：后续升级库的时候，你的修改会被覆盖，维护成本很高，所以一般不推荐。

方案三：考虑替代库 #

如果自定义组件对你来说太麻烦，也可以看看其他第三方日期时间选择库，有些库原生支持同时展示日历和手动时间输入的功能，不过需要你自己去测试适配性。不过我还是更推荐自定义方案，毕竟能完全贴合你的UX需求。

内容来源于stack exchange