重大UI日期选择器日历格式不正确

编程问答 2022-06-06

问题描述

想知道以前是否有人遇到过此问题。我试图从Material UI的选择器中简单实现DatePicker，并且不断看到日历的这种格式。在我看来，也许我的DateFnsUtils格式不正确，但是对于应该如何修复它我还是有些不满意。有人遇到过这个吗？

以下是一些规格：

"@date-io/date-fns": "^2.10.6" (Note I switched this back to 1.3.13 because of a kNown error)
"@material-ui/pickers": "^3.2.10"

这是我的代码（请注意，我使它成为要在其他地方使用的组件，但不应彻底改变结果）：

import React,{ useState } from 'react';
import DateFnsUtils from '@date-io/date-fns'; // choose your lib
import PropTypes from 'prop-types';
import { muipickersutilsprovider,DatePicker as DatePickerComponent } from '@material-ui/pickers'

const DatePicker = ({
  defaultValue,variant,onChange,...props
}) => {
  const [selectedDate,setSelectedDate] = useState(defaultValue);

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

  return (
    <muipickersutilsprovider utils={DateFnsUtils}>
      <DatePickerComponent
        variant={variant}
        value={selectedDate}
        onChange={handleDateChange}
        {...props}
      />
    </muipickersutilsprovider>
  )
}

// Specifies the default values for props:
DatePicker.defaultProps = {
  defaultValue: new Date(),variant: 'inline',};

DatePicker.propTypes = {
  onChange: PropTypes.func.isrequired,defaultValue: PropTypes.object,variant: PropTypes.string,};

export default DatePicker

谢谢。

enter image description here

编辑： 我在故事书中构建了该组件，并且组件本身运行良好...

enter image description here

现在，我想知道将其作为组件导入时是否需要特殊功能？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

date-fnsmaterial-uireactjsreactjsreactjsreactjs