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

标签 javascript css reactjs material-ui

当前使用material-ui 中的Timepicker。我将其设置为 type="time",这样我可以通过 AM/PM 选项在 12 小时内选择一天中的时间。我希望我的选择器采用 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>

最佳答案

他们似乎推荐使用@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}
   />

如果您需要使用 native 选择器,请查看这篇文章 HTML input time in 24 format

关于javascript - 如何将material-ui时间选择器更改为24小时格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60086014/

相关文章:

JavaScript:从外部访问匿名函数内部的变量

javascript - 无法在 Openlayers 3 中将绘制的圆的特征保存为 JSON

javascript - 如何在 javascript 中运行对象的 onEvent 方法?

html - margin-top css 属性的意外行为

css - 媒体查询 : composing NOT with OR

javascript - ES6 将一些函数导入为对象

javascript - 如果输入不为空 jQuery,则启用按钮

css - 使用 css 模块,如何从文件中导入类

javascript - 从主题覆盖 .Mui-disabled(或其他伪类/状态)(MUI v4.1.X)

reactjs - 仅重置 redux-from 中的一个向导