React Native中如何访问DateTimePicker的Date对象日期时间值？

一、为什么date.getDate()等方法不生效？ #

常见原因及修复方案：

1. 未正确初始化或更新状态 #

不管是函数组件还是类组件，必须确保选中的Date对象被正确存入状态，否则调用方法时可能拿到undefined或初始值。

函数组件示例（React Hooks）

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const DateTimePickerDemo = () => {
  // 初始化状态为当前时间，避免undefined
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [showPicker, setShowPicker] = useState(false);

  const handleDateChange = (event, date) => {
    setShowPicker(false);
    // 确保date不为空时再更新状态
    if (date) {
      setSelectedDate(date);
    }
  };

  return (
    <View>
      <Button title="选择日期时间" onPress={() => setShowPicker(true)} />
      {showPicker && (
        <DateTimePicker
          value={selectedDate}
          mode="datetime"
          onChange={handleDateChange}
        />
      )}
      {/* 正确调用Date方法 */}
      <Text>日: {selectedDate.getDate()}</Text>
      <Text>月: {selectedDate.getMonth() + 1}</Text> {/* 注意月份从0开始，要+1 */}
      <Text>年: {selectedDate.getFullYear()}</Text>
      <Text>时: {selectedDate.getHours()}</Text>
      <Text>分: {selectedDate.getMinutes()}</Text>
    </View>
  );
};

export default DateTimePickerDemo;

类组件示例

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

class DateTimePickerDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedDate: new Date(),
      showPicker: false,
    };
  }

  handleDateChange = (event, date) => {
    this.setState({ showPicker: false });
    if (date) {
      this.setState({ selectedDate: date });
    }
  };

  render() {
    const { selectedDate, showPicker } = this.state;
    return (
      <View>
        <Button title="选择日期时间" onPress={() => this.setState({ showPicker: true })} />
        {showPicker && (
          <DateTimePicker
            value={selectedDate}
            mode="datetime"
            onChange={this.handleDateChange}
          />
        )}
        <Text>日: {selectedDate.getDate()}</Text>
        <Text>月: {selectedDate.getMonth() + 1}</Text>
        <Text>年: {selectedDate.getFullYear()}</Text>
        <Text>时: {selectedDate.getHours()}</Text>
        <Text>分: {selectedDate.getMinutes()}</Text>
      </View>
    );
  }
}

export default DateTimePickerDemo;

2. 常见误区：月份索引从0开始 #

注意getMonth()返回的是0-11的数字，要显示实际月份需要加1，这是很多人会踩的坑。

3. 未检查date是否为null #

在onChange回调中，当用户取消选择器时，date可能为null，此时不能直接更新状态，否则会导致后续调用getDate()时报错。

二、让Date对象可被其他模块访问 #

根据你的项目架构，选择以下方案：

1. 通过Props传递 #

如果是父子组件关系，直接将selectedDate作为props传递给子组件：

// 父组件
<ChildComponent selectedDate={selectedDate} />

// 子组件
const ChildComponent = ({ selectedDate }) => {
  return <Text>子组件显示日期: {selectedDate.getDate()}</Text>;
};

2. 使用React Context #

适合跨层级组件共享，无需逐层传递props：

// DateContext.js
import React, { createContext, useState, useContext } from 'react';

const DateContext = createContext();

export const DateProvider = ({ children }) => {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <DateContext.Provider value={{ selectedDate, setSelectedDate }}>
      {children}
    </DateContext.Provider>
  );
};

export const useDate = () => useContext(DateContext);

然后在根组件包裹：

// App.js
import { DateProvider } from './DateContext';

const App = () => {
  return (
    <DateProvider>
      <DateTimePickerDemo />
      <OtherComponent />
    </DateProvider>
  );
};

在其他组件中使用：

// OtherComponent.js
import { useDate } from './DateContext';

const OtherComponent = () => {
  const { selectedDate } = useDate();
  return <Text>其他组件显示日期: {selectedDate.getDate()}</Text>;
};

3. 使用状态管理库（如Redux、Zustand） #

适合复杂大型项目，全局管理状态：
以Zustand为例，简单易用：

// store.js
import { create } from 'zustand';

export const useDateStore = create((set) => ({
  selectedDate: new Date(),
  setSelectedDate: (date) => set({ selectedDate: date }),
}));

在组件中使用：

// DateTimePickerDemo.js
import { useDateStore } from './store';

const DateTimePickerDemo = () => {
  const selectedDate = useDateStore((state) => state.selectedDate);
  const setSelectedDate = useDateStore((state) => state.setSelectedDate);

  const handleDateChange = (event, date) => {
    setShowPicker(false);
    if (date) {
      setSelectedDate(date);
    }
  };

  // ...其余代码
};

// 其他组件
const OtherComponent = () => {
  const selectedDate = useDateStore((state) => state.selectedDate);
  return <Text>其他组件显示日期: {selectedDate.getDate()}</Text>;
};

4. 全局变量（不推荐） #

虽然可以用全局变量，但不利于状态追踪和维护，仅适合小型测试场景：

// globalDate.js
export let globalSelectedDate = new Date();

// 更新时
import { globalSelectedDate } from './globalDate';
globalSelectedDate = date;

// 其他组件使用
import { globalSelectedDate } from './globalDate';

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