material ui 5.12.2版本如何使用日期选择器

要使用 Material UI 5.12.2 版本的日期选择器，您需要使用 DatePicker 组件。下面是一个示例代码，展示了如何使用 DatePicker 组件：

import React, { useState } from 'react';
import { DatePicker } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';

function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="Select Date"
        value={selectedDate}
        onChange={handleDateChange}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

export default App;

在这个示例中，我们导入了 DatePicker 组件、AdapterDateFns 和 LocalizationProvider 组件。DatePicker 组件用于显示日期选择器，并且会根据用户的选择更新选定的日期。AdapterDateFns 组件用于将日期适配到 DateFns 库中，LocalizationProvider 组件用于为 DatePicker 提供本地化设置。

在 App 组件中，我们创建了一个名为 selectedDate 的状态变量，并将其初始值设置为 null。我们还创建了一个名为 handleDateChange 的函数，用于更新 selectedDate 的值。在返回的 JSX 中，我们将 DatePicker 组件包裹在 LocalizationProvider 组件中，并将 AdapterDateFns 组件作为其 dateAdapter 属性的值传递。我们将 selectedDate 值绑定到 DatePicker 组件的 value 属性，并将 handleDateChange 函数绑定到 onChange 属性。我们还使用 renderInput 属性将 TextField 组件传递给 DatePicker 组件，以便为其提供输入框。

以上就是使用 Material UI 5.12.2 版本的 DatePicker 组件的示例代码。您可以根据自己的需要进行调整和修改。