寻求支持毫秒选项的React DateTime Picker：自定义格式需求咨询

下面几款React日期时间选择器都支持自定义格式（包括你需要的yyyy:mm:dd hh:mm:ss.msmsms格式），且能显示毫秒：

• react-datepicker
  这款轻量组件支持自定义日期格式，结合date-fns即可实现毫秒级显示。核心配置示例：

  import DatePicker from "react-datepicker";
  import "react-datepicker/dist/react-datepicker.css";
  import { useState } from "react";
  
  function CustomMsDateTimePicker() {
    const [selectedDate, setSelectedDate] = useState(new Date());
    // 匹配需求的格式，SSS对应毫秒位
    const targetFormat = "yyyy:MM:dd HH:mm:ss.SSS";
  
    return (
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        showTimeSelect
        dateFormat={targetFormat}
        timeFormat="HH:mm:ss.SSS"
      />
    );
  }
  

• Ant Design DatePicker
  如果你项目已经在使用Ant Design，它的日期选择器可以通过简单配置实现需求。依赖dayjs处理日期解析：

  import { DatePicker } from 'antd';
  import dayjs from 'dayjs';
  import 'dayjs/plugin/customParseFormat';
  dayjs.extend(customParseFormat);
  
  function AntdMsDateTimePicker() {
    const targetFormat = 'YYYY:MM:DD HH:mm:ss.SSS';
    
    return (
      <DatePicker
        showTime={{ format: 'HH:mm:ss.SSS' }}
        format={targetFormat}
        onChange={(_, dateStr) => console.log(dateStr)}
        style={{ width: 300 }}
      />
    );
  }
  

• react-datetime
  基于moment.js的组件，格式配置完全遵循moment的规则，毫秒显示只需添加SSS：

  import Datetime from 'react-datetime';
  import 'react-datetime/css/react-datetime.css';
  
  function ReactDatetimeMsPicker() {
    const targetFormat = 'YYYY:MM:DD HH:mm:ss.SSS';
    
    return (
      <Datetime
        value={new Date()}
        format={targetFormat}
        onChange={(date) => console.log(date.format(targetFormat))}
      />
    );
  }
  

这些组件都能完美匹配你需要的格式，选择时可以根据项目已有的依赖库（比如已经用了dayjs/moment）来做取舍，避免引入多余依赖。

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