React MUI从@Material-ui/pickers迁移

Material-UI 是一个流行的React UI库，提供了各种可重用的组件。其中一个组件是 @material-ui/pickers 库，它为各种输入类型（如日期和时间）提供了一组 选择器组件 。

@material-ui/pickers v5为各种输入类型（如 日期、时间和日期时间 ）提供了一组选择器组件。

这些选择器组件基于Material-UI的最新API和浏览器中的 原生日期选择器 构建，并且相对于之前的版本，它提供了更多的灵活性、新功能和更好的性能。一些选择器组件包括：

日期选择器： 这个组件允许用户从日历视图中选择特定日期。它可以配置显示不同的日期格式，并且还允许进行日期验证。
时间选择器： 这个组件允许用户从时钟视图中选择特定的时间。它可以配置显示不同的时间格式，并且还允许进行时间验证和最小/最大可选时间的设置。

在Material-UI v5中创建选择器组件的语法与之前的版本类似，但有一些差异和新功能。它还包括新的属性，如inputVariant，允许更改文本字段的变体。

语法：

import { PickerType } from '@material-ui/pickers'
export default function MyComponent() {
    const [selectedValue, setSelectedValue] = useState(initialValue)
    return (
        <PickerType
            label={label}
            value={selectedValue}
            onChange={value => setSelectedValue(value)}
            {...otherProps}
        />
    )
}

创建React项目:

步骤1: 要创建一个React应用程序，您需要通过npm命令在当前存储库中安装React模块。

npm create-react-app ./

步骤2: 使用选择器组件运行下面的命令：

npm install @mui/x-date-pickers
npm install date-fns --save
npm install dayjs

步骤3： 你可以删除已安装的src文件夹，并创建一个包含以下文件的新的src文件夹：

项目结构：

React MUI从@Material-ui/pickers迁移

运行应用的步骤：

npm start

示例1：

文件名： App.js

import * as React from 'react'; 
import { Typography } from '@mui/material'; 
import TextField from '@mui/material/TextField'; 
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; 
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; 
import { DatePicker } from '@mui/x-date-pickers/DatePicker'; 
  
export default function App() { 
    const [value, setValue] = React.useState(null); 
  
    return ( 
        <> 
            <Typography variant='h1' color="green">  
                GEEK FOR GEEKS </Typography> 
            <LocalizationProvider dateAdapter={AdapterDayjs}> 
                <DatePicker 
                    label="Basic example"
                    value={value} 
                    onChange={(newValue) => { 
                        setValue(newValue); 
                    }} 
                    renderInput={(params) => <TextField {...params} /> 
                    } 
                /> 
            </LocalizationProvider> 
        </> 
    ); 
}

文件名: index.js

import React from 'react'; 
import  ReactDOM  from 'react-dom'; 
import App from './App'; 
  
ReactDOM.render(<App />,document.getElementById('root'))

输出：

React MUI从@Material-ui/pickers迁移

示例2:

文件名: App.js

import * as React from 'react'; 
import { Typography } from '@mui/material'; 
import TextField from '@mui/material/TextField'; 
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; 
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; 
import { TimePicker } from '@mui/x-date-pickers/TimePicker'; 
  
export default function BasicTimePicker() { 
    const [value, setValue] = React.useState(null); 
  
    return ( 
        <><Typography variant='h1' color="green"> 
            GEEK FOR GEEKS </Typography> 
            <LocalizationProvider dateAdapter={AdapterDayjs}> 
                <TimePicker 
                    label="Basic example"
                    value={value} 
                    onChange={(newValue) => { 
                        setValue(newValue); 
                    }} 
                    renderInput={(params) => <TextField {...params} />} 
                /> 
            </LocalizationProvider></> 
    ); 
}

文件名: index.js

import React from 'react'; 
import  ReactDOM  from 'react-dom'; 
import App from './App'; 
  
ReactDOM.render(<App />,document.getElementById('root'))

输出：

React MUI从@Material-ui/pickers迁移