React函数式组件中DateTimePicker格式定制与选择异常问题求助

Hey there! Let's work through your DateTimePicker issues one by one — I've run into similar headaches before, so I think I can help you sort this out.

一、核心需求：定制日期显示格式+固定用户选中值 #

Your main goal is to show the picked date as 20 Jan,5:25 PM instead of the ISO format, and make sure it doesn't update in real-time. Here's how to fix this properly:

First, wrap your formatting logic into a reusable function (instead of writing it directly in the render block) — this avoids accidental real-time updates and makes your code cleaner. Also, we'll handle edge cases like single-digit minutes and 12-hour制 conversion properly:

// 封装格式化函数，接收Date对象返回指定格式字符串
const formatDateTime = (date) => {
  if (!date) return ""; // 处理空值，防止报错
  const months = ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sep","Oct","Nov","Dec"];
  const day = date.getDate();
  const monthName = months[date.getMonth()];
  
  // 处理12小时制+补零逻辑
  let hours = date.getHours();
  const minutes = date.getMinutes().toString().padStart(2, "0");
  const ampm = hours >= 12 ? "PM" : "AM";
  hours = hours % 12;
  hours = hours ? hours : 12; // 把0点转为12点

  return `${day} ${monthName}, ${hours}:${minutes} ${ampm}`;
};

Then, when rendering, use this function with your state value (the date the user picked):

<p><span style={{fontSize:12}}>{formatDateTime(value)}</span></p>

For your mapped list items: if item.value is stored as an ISO string (not a Date object), convert it first to avoid blank pages from errors:

{yourList.map((item, index) => (
  <p key={index}>
    <span style={{fontSize:12}}>{formatDateTime(new Date(item.value))}</span>
  </p>
))}

This way, you'll only show the date the user picked, not the real-time current time.

二、解决onChange报错空白问题 #

The reason onChange={e=>setValue(e.target.value)} breaks your page is that most React DateTimePicker components (like react-datepicker or MUI's) don't pass a DOM event to the onChange callback — they directly pass the selected Date object.

Your original code is correct:

<DateTimePicker onChange={(newValue)=>setValue(newValue)} value={value} />

Stick with this, and you won't get the blank page error.

三、解决无法选择日期的异常 #

This usually happens due to missing component configurations or styles:

• If you're using react-datepicker, make sure you import its required CSS:

  import 'react-datepicker/dist/react-datepicker.css';
  

  Without this, the date picker UI might be broken and unclickable.
• If you're using MUI's DateTimePicker, you must wrap it with a LocalizationProvider and date adapter:

  import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
  import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
  import TextField from '@mui/material/TextField';
  
  // 在组件中使用
  <LocalizationProvider dateAdapter={AdapterDateFns}>
    <DateTimePicker
      onChange={(newValue) => setValue(newValue)}
      value={value}
      renderInput={(params) => <TextField {...params} />}
    />
  </LocalizationProvider>
  

  Missing this provider will cause the picker to fail silently.

完整示例代码（react-datepicker版本） #

import React, { useState } from 'react';
import DateTimePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const formatDateTime = (date) => {
  if (!date) return "";
  const months = ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sep","Oct","Nov","Dec"];
  const day = date.getDate();
  const monthName = months[date.getMonth()];
  
  let hours = date.getHours();
  const minutes = date.getMinutes().toString().padStart(2, "0");
  const ampm = hours >= 12 ? "PM" : "AM";
  hours = hours % 12;
  hours = hours ? hours : 12;

  return `${day} ${monthName}, ${hours}:${minutes} ${ampm}`;
};

const App = () => {
  const [value, setValue] = useState(new Date());
  // 模拟已保存的日期列表
  const savedDates = [{value: new Date('2023-01-13T22:54:00.000Z')}];

  return (
    <div>
      <h3>Pick Date & Time</h3>
      <DateTimePicker
        onChange={(newValue) => setValue(newValue)}
        value={value}
        showTimeSelect
        timeIntervals={5} // 设置时间选择间隔为5分钟
        dateFormat="dd MMM, h:mm aa" // 让选择器输入框内显示和目标一致的格式
      />
      
      <h4>Your Selected Date:</h4>
      <p><span style={{fontSize:12}}>{formatDateTime(value)}</span></p>

      <h4>Saved Dates:</h4>
      {savedDates.map((item, index) => (
        <p key={index}>
          <span style={{fontSize:12}}>{formatDateTime(item.value)}</span>
        </p>
      ))}
    </div>
  );
};

export default App;

备注：内容来源于stack exchange，提问作者user19043629