Material-UI datagrid datepicker

Viewed 465

I'm making a scheduler using Material-UI's DataGrid component and it looks great so far. Here's how I have it set up:

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;

I have a couple questions.

  1. How do I make the datetime picker built into the datagrid (when type: is declared as 'datetime') localized? This system is being designed for something outside the US, so I'd like to localize it to British English.
  2. How would I restrict certain dates and times in the aforementioned datetime picker?

Thank you.

0 Answers
Related