Material-UI 数据网格日期选择器

Question

我正在使用 Material-UI 的 DataGrid 组件制作一个调度程序，到目前为止它看起来很棒。这是我的设置方法：

import React, {useState, useEffect } from "react";
import {DataGrid, GridToolbar} from '@material-ui/data-grid';
import axios from 'axios'

const columns = [
  {
    field: 'name',
    headerName: 'Name',
    editable: true,
    flex: 1
  },
  {
    field: 'email',
    headerName: 'Email',
    editable: true,
    flex: 1
  },
  {
    field: 'number',
    headerName: 'Phone Number',
    editable: true,
    flex: 1
  },
  {
    field: 'appointmentType',
    headerName: 'Appointment Type',
    editable: true,
    flex: 1
  },
  {
    field: 'description',
    headerName: 'Description',
    editable: true,
    flex: 1
  },
  {
    field: 'date',
    headerName: 'Date',
    editable: true,
    width: 150,
    type: 'dateTime'
  }, 
];


const Scheduler = () => {

  const [tableData, setTableData] = useState([]);
  useEffect(() => {
    fetchData()
  }, [])

  const fetchData = async () => {
    const {data} = await axios.get("/api/patients")
    setTableData(data.data)
    console.log(data)
  }

  
  return  (
    <div style={{display: 'flex', flexDirection: 'column', paddingTop: 100}}>
      <div style={{textAlign: 'center', paddingBottom: 30}}>
          <h1>Appointments</h1>
      </div>
      <div style={{display:'flex', justifyContent: 'center', alignItems:'center'}}>
        <div style={{height: 400, width: '90%'}}>
          <DataGrid 
          getRowId={(row) => row._id}
          rows={tableData}
          columns={columns}
          pageSize={10}
          rowsPerPageOptions={[10]}
          autoHeight
          components={{
            Toolbar: GridToolbar
          }}
          />
        </div>
      </div>
    </div>
  );
};

export default Scheduler;

我有几个问题。

1. 如何使数据网格中内置的日期时间选择器（当

   type:

   声明为

   'datetime'

   时）本地化？该系统是为美国以外的地区设计的，因此我想将其本地化为英式英语。
2. 如何限制上述日期时间选择器中的某些日期和时间？

谢谢你。

Answer 1

不确定这是否适用于“标准”日期时间输入，但 MUI 提供了 DatePicker 和 DateTimePicker，它们看起来更好并且更健壮。

[此示例][1]将向您展示如何将它们集成到您的代码中。

有几件事值得一提，与“本机”组件一起使用：

• LocalizationProvider

  可以为您的整个应用程序提供[本地化上下文][2]（讽刺！）
• 一组适配器，例如AdapterDateFns / AdapterDayjs / ...为您选择的包的日期和时间函数提供适配器。