如何在MUI X DateTimePicker中输入00:00:00格式的时间

依赖版本确认 #

你的项目依赖：

• React: 18.2.0
• mui/material: 5.10.5
• date-fns: 2.29.3
• date-io/date-fns: 2.16.0
• formik: 2.2.9

问题分析 #

你已配置format、mask并在views中包含秒，但仍无法输入秒，核心原因是组件版本或配置细节问题：如果使用的是@mui/lab中的旧版DateTimePicker（该组件已被官方废弃），其默认输入控件不支持秒级编辑；若使用@mui/x-date-pickers组件，则可能是配置未完全匹配。

解决方案 #

方案1：迁移至官方维护的@mui/x-date-pickers（推荐） #

@mui/lab的日期组件已停止维护，官方推荐使用@mui/x-date-pickers，先安装对应兼容版本：

npm install @mui/x-date-pickers@5.0.17

使用以下配置即可实现秒级输入：

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';
import { useState } from 'react';

function DateTimePickerWithSeconds() {
  const [value, setValue] = useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateTimePicker
        label="日期时间（含秒）"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        format="yyyy/MM/dd HH:mm:ss"
        ampm={false}
        openTo="year"
        views={['year', 'month', 'day', 'hours', 'minutes', 'seconds']}
        mask="____/__/__ __:__:__"
        renderInput={(params) => <TextField {...params} fullWidth />}
      />
    </LocalizationProvider>
  );
}

export default DateTimePickerWithSeconds;

方案2：继续使用@mui/lab旧组件（不推荐） #

若不想迁移，需自定义输入框的掩码和属性来支持秒输入：

import { DateTimePicker } from '@mui/lab/DateTimePicker';
import { LocalizationProvider } from '@mui/lab/LocalizationProvider';
import { AdapterDateFns } from '@mui/lab/AdapterDateFns';
import TextField from '@mui/material/TextField';
import { useState } from 'react';

function LabDateTimePickerWithSeconds() {
  const [value, setValue] = useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateTimePicker
        label="日期时间（含秒）"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        format="yyyy/MM/dd HH:mm:ss"
        ampm={false}
        openTo="year"
        views={['year', 'month', 'day', 'hours', 'minutes', 'seconds']}
        renderInput={(params) => (
          <TextField
            {...params}
            inputProps={{
              ...params.inputProps,
              placeholder: "yyyy/mm/dd hh:mm:ss",
              maxLength: 19
            }}
          />
        )}
      />
    </LocalizationProvider>
  );
}

export default LabDateTimePickerWithSeconds;

关键注意点 #

1. 必须保证views数组包含'seconds'，否则选择器不会加载秒级选择视图。
2. format属性必须带ss，组件才能正确解析和渲染秒部分。
3. 掩码mask="____/__/__ __:__:__"要和format完全对应，确保每个时间单位的占位符匹配。

内容的提问来源于stack exchange，提问作者m.mohammadi