React Native中如何将TextInput占位符设置为当前日期？

要实现将TextInput的placeholder替换为当前日期，同时保留日期选择器功能，只需以下两步操作：

1. 添加日期格式化函数 #

先写一个工具函数，把原生Date对象转换成可读性强的标准格式（比如YYYY-MM-DD），避免直接使用默认的日期字符串：

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

2. 修改TextInput的placeholder属性 #

把原来固定的"Select Date"替换为格式化后的当前日期，原有选择器逻辑完全保留：

<View style={styles.dateInput}>
  <Text style={styles.text}>To Date</Text>
  <TouchableOpacity onPress={() => showDatePicker(false)}>
    <TextInput
      placeholder={formatDate(new Date())} // 替换为当前日期
      value={toDate}
      editable={false}
      style={styles.dateinput}
    />
  </TouchableOpacity>
</View>
<DateTimePickerModal
  isVisible={isDatePickerVisible}
  mode="date"
  onConfirm={handleDateConfirm}
  onCancel={hideDatePicker}
/>

关键说明 #

• 当toDate为空时，TextInput显示当前日期作为占位符；用户选择日期后，toDate状态更新，TextInput自动切换为选中的日期。
• 你可以根据需求调整formatDate函数的输出格式（比如改成MM/DD/YYYY），只需修改函数内的字符串拼接逻辑即可。
• 日期选择器的弹出、确认、取消等原有功能不受任何影响。

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