我如何在 textinput react native 中显示来自时间选择器的选定时间

Question

我使用了这个时间选择器，我的 objective 是从选择器到 select 的时间，并在我的文本输入中显示它一切正常，直到我 select 它赢了't show 并给我一个错误，文本输入值必须是一个字符串谁能告诉我我做错了什么这里是我的代码

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

const AttendanceMain = () => {
  const [showPicker, setShowPicker] = useState(false);
  const [selectedTime, setSelectedTime] = useState('');

  const showTimePicker = () => {
    setShowPicker(true);
  };

  const hideTimePicker = () => {
    setShowPicker(false);
  };

  const handleConfirm = (time) => {
    setSelectedTime(time);
    hideTimePicker();
  };

  return (
    <View>
      <Text>From:</Text>
      <TextInput
        placeholder="00:00"
        keyboardType="numeric"
        onFocus={showTimePicker}
        value={selectedTime}
        onChange={handleConfirm}
      />
      <Text>To:</Text>
      <TextInput
        placeholder="00:00"
        keyboardType="numeric"
        onFocus={showTimePicker}
        value={selectedTime}
        onChange={handleConfirm}
      />
      <DateTimePickerModal
        isVisible={showPicker}
        mode="time"
        is24Hour={true}
        onConfirm={handleConfirm}
        onCancel={hideTimePicker}
      />
    </View>
  );
};

export default AttendanceMain;

Answer 1

你为什么不用react-native-datetimepicker/datetimepicker

Working Example

并像这样实现它

import React, { useState } from 'react';
import { View, Button, Platform, Text, TextInput } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const App = () => {
  const [From, setFrom] = useState(new Date());
  const [To, setTo] = useState(new Date());
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);
  const [currentSetting, setcurrentSetting] = useState('from');

  const onChange = (event, selectedDate) => {
    if (currentSetting === 'from') {
      const currentDate = selectedDate || From;
      setShow(Platform.OS === 'ios');
      setFrom(currentDate);
    } else {
      const currentDate = selectedDate || To;
      setShow(Platform.OS === 'ios');
      setTo(currentDate);
    }
  };

  const showTimepicker = (current) => {
    setShow(true);
    setcurrentSetting(current);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View>
        <Text>From:</Text>
        <TextInput
          placeholder="00:00"
          keyboardType="numeric"
          onFocus={() => showTimepicker('from')}
          value={From.toLocaleTimeString()}
        />
        <Text>To:</Text>
        <TextInput
          placeholder="00:00"
          keyboardType="numeric"
          onFocus={() => showTimepicker('to')}
          value={To.toLocaleTimeString()}
        />
      </View>

      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={From}
          mode={'time'}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

export default App;

我如何在 textinput react native 中显示来自时间选择器的选定时间

how can i display the selected time from a timepicker in a textinput react native

datetimepicker

react-native

react-native-textinput

react-native-datetimepicker