React Native中TextInput绑定DatePicker：选完日期不填充问题排查

你的代码存在两个核心问题导致日期无法填充到TextInput：

• TextInput未绑定状态值：你的TextInput没有关联date状态变量，即使date被更新，输入框也不会同步显示选中的日期。
• onConfirm回调语法错误：setOpen(false)和setDate(date)之间缺少分号（或逗号），这会导致代码执行报错，setDate可能根本无法触发。

修正后的代码 #

<TextInput 
  style={styles.textinputstyle} 
  onFocus={() => setOpen(true)} 
  value={date ? date.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }) : ''}
  editable={false} // 可选，禁止手动输入，只通过日期选择器修改
/>
<DatePicker 
  modal 
  mode="date" 
  dateFormat="MM-DD-YYYY" 
  open={open} 
  date={date} 
  onConfirm={(selectedDate) => {
    setOpen(false);
    setDate(selectedDate);
  }} 
  onCancel={() => setOpen(false)} 
/>

关键修改说明 #

1. 给TextInput添加value属性，将date状态格式化为MM-DD-YYYY格式后赋值，确保输入框同步显示选中的日期。
2. 修复onConfirm中的语法错误，给两个状态更新语句添加分号，保证代码正常执行。
3. 可选添加editable={false}，避免用户手动输入日期，确保日期只能通过选择器修改。

内容的提问来源于stack exchange，提问作者user1041240