react-datetime插件日期选择异常求助：首次返回undefined，二次返回旧值

Hey there! I’ve wrestled with this exact problem with react-datetime before, so I know how annoying it is when your date picker doesn’t behave like it should. Let’s walk through why this happens and how to fix it.

Why This Happens #

Most of the time, this issue stems from two common pitfalls:

• Uninitialized state: If your component’s date state starts as undefined, the first selection might fail to trigger a proper state update.
• Mishandling the onChange event: Either you’re using the wrong event (like onBlur instead of onChange), or you’re not directly updating the state with the returned moment object. State updates in React are asynchronous, so relying on the state value right after setting it can also cause lagged behavior.

Step-by-Step Fixes #

1. Initialize Your State Properly

Don’t leave your date state as undefined—start with null or a default moment object (like the current date). This gives react-datetime a valid starting point to work with.

// 函数组件示例
import { useState } from 'react';
import moment from 'moment';

const [selectedDate, setSelectedDate] = useState(null); 
// 或者用默认日期：useState(moment())

2. Handle onChange Correctly

Make sure you’re using the onChange event directly, and update your state with the moment object it returns. Remember, if you need to use the selected date immediately, use the event’s date parameter instead of the state (since state updates are async).

<Datetime
  value={selectedDate}
  onChange={(date) => {
    setSelectedDate(date);
    // 直接用date参数获取最新值，不要用selectedDate
    console.log('Selected date:', date ? date.format('YYYY-MM-DD') : 'No date chosen');
  }}
/>

3. Check for Async State Gotchas

If you’re working with class components, use the setState callback if you need to access the updated state right away:

// 类组件示例
handleDateChange = (date) => {
  this.setState({ selectedDate: date }, () => {
    // 这里能拿到最新的state值
    console.log('Updated state:', this.state.selectedDate.format('YYYY-MM-DD'));
  });
};

4. Update react-datetime to the Latest Version

Older versions of the library had bugs related to initial selection handling. Run this command to upgrade:

npm install react-datetime@latest

Full Working Example #

Here’s a complete component that should work without the lag or undefined issues:

import React, { useState } from 'react';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';
import moment from 'moment';

const DatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <div className="date-picker-container">
      <Datetime
        value={selectedDate}
        onChange={handleChange}
        inputProps={{ placeholder: 'Pick a date & time' }}
        timeFormat={true}
      />
      <div className="selected-date">
        {selectedDate ? (
          <p>You selected: {selectedDate.format('MMMM Do YYYY, h:mm a')}</p>
        ) : (
          <p>No date selected yet</p>
        )}
      </div>
    </div>
  );
};

export default DatePicker;

Final Checks #

If you’re still having issues, double-check if you have any custom logic (like debouncing/throttling) that might be delaying state updates, or if parent components are passing state down incorrectly.

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