使用Formik处理React Native中的DateTimePicker值

npm install formik react-native-modal-datetime-picker

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

const MyForm = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const initialValues = {
    dateTime: '',
  };

  const onSubmit = (values) => {
    console.log(values);
  };

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => {
    hideDatePicker();
    // 将选中的日期时间设置到表单字段中
    setFieldValue('dateTime', date);
  };

  return (
    <Formik initialValues={initialValues} onSubmit={onSubmit}>
      {({ handleChange, handleSubmit, setFieldValue, values }) => (
        <View>
          <Button title="Select Date" onPress={showDatePicker} />
          <TextInput
            onChangeText={handleChange('dateTime')}
            value={values.dateTime}
          />
          <DateTimePickerModal
            isVisible={isDatePickerVisible}
            mode="datetime"
            onConfirm={handleConfirm}
            onCancel={hideDatePicker}
          />
          <Button title="Submit" onPress={handleSubmit} />
        </View>
      )}
    </Formik>
  );
};

const App = () => {
  return (
    <View>
      <MyForm />
    </View>
  );
};