React MUI Timepicker - 无法禁用特定时间

Question

有没有办法禁用时钟的某些小时？ https://mui.com/x/react-date-pickers/time-picker/

minTime={new Date(0, 0, 0, 8)}
maxTime={new Date(0, 0, 0, 18, 45)}

它应该是这样工作的，但它对我不起作用。你知道它是如何工作的吗？有什么方法可以创建 2 个或更多时区。因为这是一个餐厅应用程序，餐厅在午餐和晚餐时间开放...

不适合我

import React, { useState } from "react";
import {
  DatePicker,
  TimePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import { createTheme, ThemeProvider } from "@material-ui/core";
import deLocale from "date-fns/locale/de";
const theme = createTheme({
  palette: {
    primary: {
      main: "#eab308",
    },
  },
});
const Datepicker = ({ state, setState }) => {
  const handleDateChange = (date) => {
    setState(date);
  };
  // sunday = 0 ; saturday = 6 date.getDay() === 1 || date.getDay() === 3 disables monday and wednesday
  function disableDays(date) {
    return date.getDay() === 1 || date.getDay() === 3;
  }
  // Dont use state in this case. Otherwise you can abuse date + 1 month and skip it unlimited farward
  const today = new Date();
  return (
    <ThemeProvider theme={theme}>
      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={deLocale}>
        <div className='flex justify-center max-w-[300px] mx-auto'>
          <div className='p-2'>
            <DatePicker
              shouldDisableDate={disableDays}
              value={state}
              onChange={handleDateChange}
              format='dd.MM.yyyy'
              cancelLabel='Abbrechen'
              disablePast
              maxDate={new Date(today.getTime() + 31 * 24 * 60 * 60 * 1000)}
              orientation='landscape'
            />
          </div>
          <div className='p-2'>
            <TimePicker
              value={state}
              onChange={handleDateChange}
              ampm={false}
              minutesStep={5}
              orientation='landscape'
              minTime={new Date(0, 0, 0, 8)}
              maxTime={new Date(0, 0, 0, 18, 45)}
            />
          </div>
        </div>
      </MuiPickersUtilsProvider>
    </ThemeProvider>
  );
};
export default Datepicker;

Answer 1

从您的导入中可以清楚地看出您使用的是 Material-ui v4.
但是您想使用 v5 TimePicker

中的一些道具

v4 TimePicker的道具不包含minTime或maxTime,
v4 TimePicker 文档：https://v4.mui.com/components/pickers .

您必须升级到 Material ui v5
v5 TimePicker 文档：https://mui.com/x/react-date-pickers/time-picker .

或者：如果时间不在特定范围内，您可以创建自定义 TimePicker 呈现自定义错误。
这将帮助您：https://github.com/mui/material-ui-pickers/issues/519

React MUI Timepicker - 无法禁用特定时间

React MUI Timepicker - Can't disable specific times

reactjs

material-ui

timepicker