如何将材料 UI 时间选择器更改为 24 小时格式

Question

当前使用来自 material-ui 的Timepicker。我将其设置为type="time"，这使我可以使用 AM/PM 选项在 12 小时内选择白天的时间。我想让我的选取器采用 24 小时格式，这将删除 AM/PM 选项。我查看了 material-ui 文档，但找不到任何可以处理此问题的内容。

沙盒

当前代码：

<form className={classes.container} noValidate>
<TextField
id="time"
label="Alarm clock"
type="time"
className={classes.textField}
InputLabelProps={{
shrink: true
}}
inputProps={{
step: 900 // 5 min
}}
/>
</form>

Answer 1

他们似乎使用 @material-ui/pickers

https://mui.com/x/api/date-pickers/time-picker/#TimePicker-prop-ampm

import { TimePicker } from '@material-ui/pickers'

以下选项应该为您完成

ampm={false}

<TimePicker
clearable
ampm={false}
label="24 hours"
value={selectedDate}
onChange={handleDateChange}
/>

如果您需要使用本机选择器，请查看此帖子 24 格式的 HTML 输入时间

Answer 2

如果您使用材质 UI

import DateTimePicker from '@mui/lab/DateTimePicker';

<DateTimePicker
label="Дуусах өдөр"
value={dateValue}
ampm={false} // use this row
onChange={handleChangeDate}
renderInput={(params) => <TextField {...params} />}
/>

但是我们需要避免@mui/labs组件

Answer 3

使用时间选择器时，您可以更改本地化提供程序以将时区更改为 24 小时格式 这肯定会对你有用

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { ClockPicker } from '@mui/x-date-pickers/ClockPicker';
export default function SubComponentsTimePickers() {
const [date, setDate] = React.useState(new Date());
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<ClockPicker date={date} onChange={(newDate) => setDate(newDate)} />
</LocalizationProvider>
);
}