Material-UI DataGrid内置datetime picker本地化及时间范围限制问题

1. 英式英语本地化操作 #

Material-UI的DataGrid内置日期选择器的本地化需要通过统一的本地化提供者实现，操作步骤：

• 安装依赖包：
  npm install @mui/x-date-pickers @date-io/date-fns date-fns
• 在代码中引入英式英语配置和本地化提供者，修改你的Scheduler组件代码如下：

首先新增导入语句：

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import enGB from 'date-fns/locale/en-GB';

然后在return的最外层包裹LocalizationProvider：

return (
  <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={enGB}>
    {/* 你原来的所有JSX内容保持不变 */}
    <div style={{display: 'flex', flexDirection: 'column', paddingTop: 100}}>
      {/* 原有内容不需要修改 */}
    </div>
  </LocalizationProvider>
)

配置完成后，日期选择器会自动适配英式英语习惯，日期格式为日/月/年，时间默认使用24小时制，所有控件文本也会切换为英式英语。

2. 可选日期时间限制操作 #

你需要自定义date列的编辑组件，替换默认的选择器来添加限制规则，修改你的columns配置中date字段的代码：

import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

const columns = [
  // 其他列配置保持不变
  {
    field: 'date',
    headerName: 'Date',
    editable: true,
    width: 150,
    type: 'dateTime',
    // 自定义编辑组件添加限制
    renderEditCell: (params) => {
      const handleChange = (newValue) => {
        params.api.setEditCellValue({ 
          id: params.id, 
          field: params.field, 
          value: newValue 
        });
      };
      return (
        <DateTimePicker
          value={params.value}
          onChange={handleChange}
          // 日期限制示例：只能选今天到未来30天内的日期
          minDate={new Date()}
          maxDate={new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)}
          // 时间限制示例：只能选9:00-18:00的时间段
          minTime={new Date(0, 0, 0, 9, 0)}
          maxTime={new Date(0, 0, 0, 18, 0)}
          // 额外限制示例：禁用周六周日
          shouldDisableDate={(date) => {
            const day = date.getDay();
            return day === 0 || day === 6;
          }}
          slotProps={{
            textField: {
              variant: 'standard',
              fullWidth: true,
              error: params.error,
              helperText: params.error ? params.error.message : '',
            }
          }}
        />
      )
    }
  }, 
];

你可以根据需求自行修改minDate、maxDate、minTime、maxTime以及shouldDisableDate、shouldDisableTime的规则，实现任意的可选范围限制。

内容的提问来源于stack exchange，提问作者JM223