Question

在用户在基于 react-native-modal-datetime-picker 库的日期时间选择器上选择日期后，我试图在文本输入上显示日期，在博览会小吃上。

但是，一旦选择了日期，我似乎无法显示它。请问我搞砸了下面这段代码的哪一部分。

感谢您的任何建议。

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

export default function ShareExample() {

  const [date, SetDate] = useState('');
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

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

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

  const handleConfirm = (date) => {
    SetDate(date);
    hideDatePicker();
  };

return(
  <View style={styles.container}>
  <TextInput
            style={styles.textInput}
            value={date}
            placeholder="Date..."/>
  <Button
  onPress={showDatePicker}
  title='Set Date'/>
  <DateTimePickerModal
          isVisible={isDatePickerVisible}
          mode="date"
          onConfirm={handleConfirm}
          onCancel={hideDatePicker}
          />
  </View>
)
  
}

const styles = StyleSheet.create({
  container:{
    padding: 50
  },
  textInput:{
    borderWidth: 1,
    borderColor: 'black',
    marginBottom: 5
  }
})

Answer 1

使用 DateTimePickerModal ，您不会得到字符串值，而是会得到一个 Date 对象，您必须将其转换为字符串值才能在 TextInput 中显示它。

您可以这样做：Expo Snack

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

export default function ShareExample() {
  const [date, setDate] = useState('');
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

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

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

  const handleConfirm = (date) => {
    setDate(date);
    hideDatePicker();
  };

  const getDate = () => {
    let tempDate = date.toString().split(' ');
    return date !== ''
      ? `${tempDate[0]} ${tempDate[1]} ${tempDate[2]} ${tempDate[3]}`
      : '';
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.textInput}
        value={getDate()}
        placeholder="Date..."
      />
      <Button onPress={showDatePicker} title="Set Date" />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
      <Text>{date.toString()}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 50,
  },
  textInput: {
    borderWidth: 1,
    borderColor: 'black',
    marginBottom: 5,
    padding: 10,
  },
});

在日期时间选择器上选择后如何在文本输入上显示日期？

1 个答案: