React Native中如何获取DateTimePicker的日期值并格式化？

我来帮你搞定这个datetimepicker的日期提取和格式化难题！你的核心问题在于对onChange回调的参数理解有误，还有日期格式化的方法没找对，咱们一步步来修正：

1. 纠正onChange回调的参数使用 #

这个组件的onChange回调接收两个参数：第一个是事件对象，第二个才是用户选中的Date实例（Android端点击取消时这个值会是null）。你之前写的(value) => setFecha(value.event)完全搞错了参数结构，这是拿不到正确日期的。

正确的回调写法应该是：

onChange((event, selectedDate) => {
  // 处理选中的日期
})

2. 将选中日期存入state #

在回调里，我们需要先判断selectedDate是否有效（避免Android取消操作的null值），然后更新你的date状态：

onChange((event, selectedDate) => {
  // 只有选中有效日期时才更新state
  if (selectedDate) {
    setDate(selectedDate);
  }
})

3. 格式化日期为YYYY-MM-DD格式 #

拿到Date实例后，我们可以用两种方式格式化：

方式一：原生Date方法手动拼接 #

自己处理年、月、日的补零逻辑：

const formatDate = (date) => {
  const year = date.getFullYear();
  // 月份是0开始的，所以要+1，并且补零到两位
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 使用的时候：
const formattedDate = formatDate(date);

方式二：用Intl.DateTimeFormat（更简洁） #

利用React Native内置的国际化API来格式化，兼容性很好：

const formatDate = (date) => {
  return new Intl.DateTimeFormat('en-CA').format(date);
  // 也可以自定义格式选项：
  // return new Intl.DateTimeFormat('zh-CN', {
  //   year: 'numeric',
  //   month: '2-digit',
  //   day: '2-digit'
  // }).format(date).replace(/\//g, '-');
};

完整的修正代码 #

把这些整合起来，你的代码应该改成这样：

import React from 'react';
import { Platform } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const YourComponent = () => {
  const [date, setDate] = React.useState(new Date());
  const [today] = React.useState(new Date());

  // 日期格式化函数
  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}`;
  };

  // 可以在需要的地方获取格式化后的日期
  const formattedSelectedDate = formatDate(date);

  return (
    <DateTimePicker
      mode='date'
      value={date} // 这里应该绑定state里的date，而不是today，否则选择器不会同步选中状态
      display={Platform.OS === 'ios' ? 'spinner' : 'default'}
      onChange={(event, selectedDate) => {
        if (selectedDate) {
          setDate(selectedDate);
          // 如果需要直接拿到格式化后的字符串做后续业务，也可以在这里处理
          // const formatted = formatDate(selectedDate);
          // 执行你的业务逻辑
        }
      }}
      minimumDate={today}
    />
  );
};

export default YourComponent;

另外注意：你之前的value属性绑定的是today，这会导致选择器始终显示今天的日期，应该改成绑定你的date状态，这样选择后选择器才会同步显示选中的日期。

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