materialUI/nextjs 中的数字时间选择器

Question

我想显示一个数字时间选择器或持续时间选择器（仅 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 基本时间选择器，但它总是显示模拟时钟。我想要那个下拉菜单或数字时钟

Answer 1

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;