我想显示一个数字时间选择器或持续时间选择器(仅 m,s)。我的项目主题是material UI,nextjs,所以我使用materialUI配置来实现这个,但它总是显示模拟时钟。下面是我的代码和用户界面图片。告诉我哪里错了:
<Grid item xs={12} lg={6} sm={12}>
<FormLabel>Time Duration</FormLabel>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<TimePicker
views={['minutes', 'seconds']}
openTo="minutes"
format="mm:ss"
value={formik.values.duration}
onChange={(newValue) => {
formik.setFieldValue('duration', newValue);
console.log(newValue);
}}
renderInput={(params) => (
<CustomTextField
{...params}
fullWidth
sx={{
'& .MuiSvgIcon-root': {
width: '18px',
height: '18px',
},
'& .MuiFormHelperText-root': {
display: 'none',
},
}}
/>
)}
/>
</LocalizationProvider>
</Grid>
我尝试了 Material UI 基本时间选择器,但它总是显示模拟时钟。我想要那个下拉菜单或数字时钟
Material-UI (MUI) TimePicker 组件目前不原生支持数字时钟。你可以使用类似下面的东西,尝试一下并让我知道-
npm install @mui/material @mui/lab @emotion/react @emotion/styled @date-io/dayjs dayjs
import React from 'react';
import { LocalizationProvider, DesktopTimePicker } from '@mui/lab';
import AdapterDayjs from '@mui/lab/AdapterDayjs';
import { TextField, Grid, FormLabel } from '@mui/material';
import dayjs from 'dayjs';
const CustomTextField = (props) => {
return <TextField {...props} />;
};
const DigitalTimePicker = ({ value, onChange }) => {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DesktopTimePicker
views={['minutes', 'seconds']}
openTo="minutes"
format="mm:ss"
value={value}
onChange={onChange}
renderInput={(params) => (
<CustomTextField
{...params}
fullWidth
sx={{
'& .MuiSvgIcon-root': {
width: '18px',
height: '18px',
},
'& .MuiFormHelperText-root': {
display: 'none',
},
}}
/>
)}
/>
</LocalizationProvider>
);
};
const MyComponent = ({ formik }) => {
return (
<Grid item xs={12} lg={6} sm={12}>
<FormLabel>Time Duration</FormLabel>
<DigitalTimePicker
value={formik.values.duration}
onChange={(newValue) => {
formik.setFieldValue('duration', newValue);
console.log(newValue);
}}
/>
</Grid>
);
};
export default MyComponent;