Datepickerを使用したカレンダーの作成

パッケージ

のインストール
with npm
npm install @mui/x-date-pickers
with yarn
yarn add @mui/x-date-pickers

の最上階でprovider

を囲む

import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

ReactDOM.render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <LocalizationProvider dateAdapter={AdapterDateFns}>
                <App />
            </LocalizationProvider>
        </ThemeProvider>
    </React.StrictMode>,
    document.getElementById("root")
);

導入

import React, { useState } from "react";
import TextField from "@mui/material/TextField";

import { DatePicker } from "@mui/x-date-pickers/DatePicker";

const Date = () => {
    const [value, setValue] = useState(null);

    return (
        <div>
            <DatePicker
                value={value}
                label="Basic example"
                onChange={(newValue) => {
                    setValue(newValue);
                }}
                renderInput={(params) => <TextField {...params} />}
            />
        </div>
    );
};

export default Date;