Estoy haciendo un programador usando el componente DataGrid de Material-UI y se ve muy bien hasta ahora. Así es como lo tengo configurado:

 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;

Tengo un par de preguntas.

1. ¿Cómo hago que el selector de fecha y hora integrado en la cuadrícula de datos (cuando el type: se declara como 'datetime' ) esté localizado? Este sistema se está diseñando para algo fuera de los EE. UU., por lo que me gustaría traducirlo al inglés británico.
2. ¿Cómo restringiría ciertas fechas y horas en el selector de fecha y hora mencionado anteriormente?

Gracias.