How to change material-ui timepicker to 24 hour format

Question

Currently using a Timepicker from material-ui. I have it set to type="time" which allows me to select through times during the day in 12 hours with a AM / PM option. I would like to have my picker with a 24-hour format which would remove the AM/PM option. I've looked in the material-ui documentation and could not find anything that could handle this.

Sandbox

Current code:

    <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

They seem to be reccomending using @material-ui/pickers

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

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

the following option should do it for you

ampm={false}

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

If you need to use the native picker check out this post HTML input time in 24 format

Answer 2

If you use Material UI

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


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

But we need to avoid @mui/labs components

Answer 3

while using time picker you can change the localization provider to change the time zone to 24hr format this will surely work for you

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>
  );
}