0

我使用了这个时间选择器我的目标是从选择器中选择一个时间并将其显示在我的文本输入中一切正常，直到我选择它不会显示的时间并给我一个错误，即文本输入值必须是一个字符串谁能告诉我我做错了什么这是我的代码到目前为止

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;
4

1 回答 1

1

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

工作示例

并像这样实现它

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;
于 2021-08-18T06:45:48.290 回答