带有日期、小时、分钟和秒的 DateTimePicker答案

【问题标题】：DateTimePicker with date, hours, minutes and seconds带有日期、小时、分钟和秒的 DateTimePicker
【发布时间】：2022-01-15 07:22:27
【问题描述】：

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

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

This is what I have so far

【问题讨论】：

标签： javascript reactjs datetimepicker

【解决方案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;

【讨论】：

非常感谢，但我避免使用材料组件，因为选择时间的方式对我来说似乎不实用。我附上了一张图片，所以你可以看到我想要它的样子。另一方面， format="dd-MM-yyyy HH:mm:ss" 不会让我选择秒，这是我想要的。
@LuisSandoval，您可以尝试：defaultValue={ "2017-05-24T10:30:14"} 但它不会让您点击输入中的秒数并手动输入数字。如果喜欢，只需将新日期格式化成上面的格式即可。
感谢您的回复。正是现在我需要一个日期时间选择器，它允许我选择日期、小时、分钟和秒。