选择后如何在文本字段中将默认值设置为选定日期答案

【问题标题】：how to set default value as selected date in text filed after selcted选择后如何在文本字段中将默认值设置为选定日期
【发布时间】：2022-12-15 11:47:44
【问题描述】：

我正在尝试制作日期 piker 我可以打开日期选择器并选择日期，但我无法在输入字段中显示选择的日期 1s 选择了日期

  const [text, setpicdate] = useState(); //date is slected here
const [mydate, setDate] = useState(new Date());
 const [displaymode, setMode] = useState('date');
 const [isDisplayDate, setShow] = useState(false);
 const changeSelectedDate = (event, selectedDate) => {
   setDate(selectedDate);
   setpicdate(selectedDate);

   setShow(false);
 };
 const showMode = currentMode => {
   setShow(true);
   setMode(currentMode);
 };
 const displayDatepicker = () => {
   showMode('date');
 };


<TextInput
         style={styles.forminput}
         label="Baby's Date of Birth"
         defaultValue={text}  // displaying date error
         onPressIn={displayDatepicker}
         // onclick={displayDatepicker}
       />
{isDisplayDate && (
         <DateTimePicker
           testID="dateTimePicker"
           value={mydate}
           mode={displaymode}
           is24Hour={true}
           display="default"
           // onDateChange={text => {
           //   setTextname(text);
           // }}
           // // onChange={text => changeSelectedDate()}
           onChange={changeSelectedDate}
         />
       )}

【问题讨论】：

日期选择器的共享代码。
@JatinBhuva 我已经更新了问题让我知道你是否需要更多代码
你在 console.log() 里面的 changeselectedDate 函数中得到一个日期吗？
我应该如何检查 console.log(date)
console.log(selectedDate) 来了？在更改选择日期

标签： react-native

【解决方案1】：

将您的 TextInput 替换为

<TouchableOpacity onPress={displayDatepicker}>
 <Text>{moment(mydate).format('DD/MM/YYYY')}</Text>
</TouchableOpacity>

使用 moment js npm 包进行日期格式化和验证 https://www.npmjs.com/package/moment

【讨论】：

我试过你的答案，但这看起来不像输入字段我想要一个输入字段
你得到正确的日期了吗？
是的，我正在约会
只需通过提供适当的高度、宽度、borderRadius 和所有其他所需的样式，将 TouchableOpacity 重新设计为看起来像 TextInput。您在这里不需要 TextInput 只是为了它的外观。

【解决方案2】：

像这样更新您的代码，它将起作用。

import DateTimePicker from '@react-native-community/datetimepicker';
import React, {useState} from 'react';
import {SafeAreaView, StyleSheet, TextInput} from 'react-native';
export default function Test() {
  const [mydate, setDate] = useState(new Date());
  const [displaymode, setMode] = useState('time');
  const [text, setpicdate] = useState(new Date());
  const [isDisplayDate, setShow] = useState(false);
  const changeSelectedDate = (event, selectedDate) => {
    setpicdate(selectedDate);
    setShow(false);
  };
  const showMode = currentMode => {
    setShow(true);
    setMode(currentMode);
  };
  const displayTimepicker = () => {
    showMode('date');
  };
  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        onFocus={displayTimepicker}
        defaultValue={mydate.toDateString()}
        value={text.toDateString()}
        style={{backgroundColor: 'lightgray', height: 50, width: '70%'}}
        label="Baby's Date of Birth"
      />
      {isDisplayDate && (
        <DateTimePicker
          testID="dateTimePicker"
          value={mydate}
          mode={displaymode}
          is24Hour={true}
          display="default"
          onChange={changeSelectedDate}
        />
      )}
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

【讨论】：

defaultValue={mydate.Date String()} value={text.toDateString()} 默认值和值都给出错误
它运行完美，您可以从上面复制所有代码并尝试运行它。

【解决方案3】：

这可能有效value={new Date(mydate.toString())}

例子：

    <TextInput
             style={styles.forminput}
             label="Baby's Date of Birth"
             value={new Date(mydate.toString())}
             onPressIn={displayDatepicker}
           />

【讨论】：