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

3225 ワード

  • パッケージ
  • のインストール
    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;