如何将Material-UI DateTimePicker模拟时间选择器改为数字模式？

针对你的两个问题，我来一步步给出实用的解答：

1. Material-UI是否有数字形式的时间选择器？ #

你当前使用的是旧版本的material-ui（v0.x系列）以及基于它的material-ui-datetimepicker，这个版本的官方组件库没有内置数字形式的时间选择器，默认的TimePickerDialog就是你现在看到的模拟时钟样式。

不过如果你愿意升级到最新的Material-UI（v5+）以及配套的@mui/x-date-pickers组件库，官方是原生支持数字形式时间选择器的，这个方案我后面也会详细说明。

2. 如果没有，该如何实现？ #

有两种可行的方案，你可以根据项目的实际情况选择：

方案一：自定义数字时间选择器替换原有组件 #

既然DateTimePicker支持传入自定义的TimePicker组件，我们可以自己实现一个数字输入式的时间选择器，替换掉默认的TimePickerDialog。

下面是一个简单的可运行示例：

import React, { useState } from 'react';
import { Dialog, TextField, Button } from 'material-ui';

// 自定义数字时间选择器组件
const NumericTimePicker = ({ open, onRequestClose, onChange, value }) => {
  // 初始化时间输入框的值（从传入的Date对象提取HH:mm）
  const [timeValue, setTimeValue] = useState(
    value ? value.toTimeString().slice(0, 5) : ''
  );

  const handleConfirm = () => {
    if (!timeValue.match(/^\d{2}:\d{2}$/)) {
      alert('请输入正确的时间格式（HH:mm）');
      return;
    }
    const [hours, minutes] = timeValue.split(':');
    const newDate = value ? new Date(value) : new Date();
    newDate.setHours(parseInt(hours, 10));
    newDate.setMinutes(parseInt(minutes, 10));
    onChange(newDate);
    onRequestClose();
  };

  return (
    <Dialog open={open} onRequestClose={onRequestClose}>
      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <TextField
          label="选择时间"
          value={timeValue}
          onChange={(e) => setTimeValue(e.target.value)}
          placeholder="HH:mm"
          inputProps={{
            maxLength: 5,
          }}
        />
        <Button onClick={handleConfirm} primary>确认</Button>
      </div>
    </Dialog>
  );
};

// 在你的组件中使用自定义时间选择器
class DatetimeFilter extends React.Component {
  handleTimeChange = (date) => {
    // 这里处理时间变化后的逻辑
    console.log('选中的时间：', date);
  };

  render() {
    return (
      <DateTimePicker
        DatePicker={DatePickerDialog}
        TimePicker={NumericTimePicker} // 替换为自定义组件
        onChange={this.handleTimeChange}
        floatingLabelText={this.props.label}
        timeFormat={'24hr'}
      />
    );
  }
}

你还可以根据需求扩展这个组件，比如添加秒数输入、输入实时验证、下拉选择小时/分钟等功能。

方案二：升级到最新版Material-UI及配套组件库 #

如果项目允许版本升级，推荐使用@mui/material（v5+）和@mui/x-date-pickers，这个官方组件库原生支持数字时间选择器，无需自己造轮子：

首先安装依赖：

npm install @mui/material @emotion/react @emotion/styled @mui/x-date-pickers dayjs

然后实现数字式日期时间选择器：

import React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import TextField from '@mui/material/TextField';

const DatetimeFilter = ({ label }) => {
  const [selectedDate, setSelectedDate] = React.useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateTimePicker
        label={label}
        value={selectedDate}
        onChange={(newValue) => setSelectedDate(newValue)}
        renderInput={(params) => <TextField {...params} />}
        ampm={false} // 启用24小时制
        timePickerProps={{ mode: 'numeric' }} // 强制数字输入模式
      />
    </LocalizationProvider>
  );
};

这个方案的优势是官方组件有完善的交互逻辑、样式适配和国际化支持，后续维护成本更低。

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