带有日期、小时、分钟和秒的日期时间选择器

Question

我正在开发一个系统，要求我使用此格式设置精确的时间点 dd/MM/yyyy HH:mm:ss，问题是我找不到添加包含所有这些内容的日期时间选择器的方法组件 MUI 的 DateTimePicker 非常丑陋，我喜欢原生的日期选择器（这是我想使用的），但我只能选择完整的日期、小时、分钟，但不能选择秒。有办法做到吗？到目前为止，我的代码是这样的（我还附上了结果的图像）：

<TextField
 id="datetime-local"
 label="Next appointment"
 type="datetime-local"
 defaultValue={ new Date() }
 InputLabelProps={{shrink: true,}}
/>

Answer 1

material-ui 有选择器：@material-ui/pickers

您可以将其与

format

选项一起使用：

import React, { useState } from 'react';
import { DateTimePicker } from '@material-ui/pickers';

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
      <DateTimePicker format="dd-MM-yyyy HH:mm:ss" value={selectedDate} onChange={handleDateChange} />
  );
}

export default App;

Answer 2

您可以将这些视图合并到 DesktopDateTimePicker 组件中，如下所示：

  <DesktopDateTimePicker
      views={['year','month','day','hours', 'minutes', 'seconds']} />

此配置允许用户在 DesktopDateTimePicker 组件中选择年、月、日、小时、分钟和秒。