How to disable minutes and seconds in Mui Date and time picker?

Question

I am trying to use Mui date and time picker with disabling minutes and seconds. I disabled the minute with minuteStep={60}. There is not a second prompt. But Date and time picker picking random seconds. Is there any way I can omit the seconds or lock the seconds value to 0?

<Controller
                name="checkOut"
                control={control}
                render={({ field }) => (
                  <Grid item xs={12} md={12}>
                    <FormControl sx={FCWidth}>
                      <DateTimePicker
                        {...field}
                        toolbarFormat=""
                        label="Check Out"
                        name="checkOut"
                        disablePast={true}
                        minutesStep={60}
                        renderInput={(params) => <TextField {...params} />}
                      />
                      <FormHelperText error={true}>
                        {errors.checkOut?.message}
                      </FormHelperText>
                    </FormControl>
                  </Grid>
                )}
              />

Answer 1

In MUI 5, you should be able to do this with the views property. However, an open bug prevents it from zeroing out the unused fields.

As a workaround, you can zero out the desired fields yourself by intercepting the onChange callback. Here's an example with TimePicker, React Hook Form 7, and Luxon:

<Controller
  name="startTime"
  render={({ field: { onChange, ref, ...props }, fieldState: { error } }) => (
    <TimePicker
      label="Start time"
      renderInput={(props) => (
        <TextField {...props} helperText={error?.message} />
      )}
      onChange={(date) => onChange(toDateTime(date).startOf('minute'))}
      {...props}
    />
  )}
/>

Note that toDateTime is a helper function that accepts a Luxon DateTime, JS Date, or ISO date string and returns a DateTime.