如何在 Mui 日期和时间选择器中禁用分钟和秒？答案

【问题标题】：How to disable minutes and seconds in Mui Date and time picker?如何在 Mui 日期和时间选择器中禁用分钟和秒？
【发布时间】：2021-12-03 11:17:38
【问题描述】：

我正在尝试使用 Mui 日期和时间选择器来禁用分钟和秒。我用minuteStep={60} 禁用了分钟。没有第二个提示。但是日期和时间选择器选择随机秒。有什么办法可以省略秒数或将秒数锁定为 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>
                )}
              />

【问题讨论】：

标签： material-ui next.js react-hook-form date-fns

【解决方案1】：

在 MUI 5 中，您应该可以使用 views property 执行此操作。但是，打开的 bug 会阻止它清零未使用的字段。

作为一种解决方法，您可以通过拦截onChange 回调自行将所需字段清零。这是TimePicker、React Hook Form 7 和 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}
    />
  )}
/>

请注意，toDateTime 是一个辅助函数，它接受 Luxon DateTime、JS Date 或 ISO 日期字符串并返回 DateTime。

【讨论】：