Datepickerを使用したカレンダーの作成
3225 ワード
with npm
npm install @mui/x-date-pickers
with yarn
yarn add @mui/x-date-pickers
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;
Reference
この問題について(Datepickerを使用したカレンダーの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@uhui94/muiDatepicker로-캘린더-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol