如何将material-ui时间选择器更改为24小时格式答案

【问题标题】：How to change material-ui timepicker to 24 hour format如何将material-ui时间选择器更改为24小时格式
【发布时间】：2020-02-06 00:22:21
【问题描述】：

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

Sandbox

当前代码：

    <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>

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

他们似乎正在使用@material-ui/pickers 推荐

https://material-ui-pickers.dev/api/TimePicker

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

以下选项应该可以为您完成

ampm={false}

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

如果您需要使用本机选择器，请查看此帖子 HTML input time in 24 format

【讨论】：

【解决方案2】：

如果你使用 Material UI

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


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

【讨论】：