Javascript 材料UI日期选择器组件在Safari上工作不正常

我正在构建一个React应用程序，并在自定义组件中使用

material ui pickers

Date pickers组件，该组件还使用

formik

表单和

yup

进行验证。 该组件在不同的浏览器上运行良好，但在Safari上，它同时提供了来自组件内部的错误（使用formik+yup验证）和日期选择器组件的内置invalidDateMessage属性。 我认为这个问题与material ui pickers日期选择器有关的原因是，在表单中，我有其他material ui字段，在所有浏览器上都可以正常工作

我试图查找类似的问题，但并没有发现任何问题，而且玩弄验证（将date（）更改为string（））也不起作用

我正在处理更改时的值，以便能够从日期中获取字符串，但是如果没有它，组件将无法工作，因此我假设这不是问题所在

组成部分：

import moment from "moment";
import MomentUtils from "@date-io/moment";
import React from "react";
import { FormHelperText } from "@material-ui/core";
import { Field, ErrorMessage } from "formik";
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

const FormikDatePicker = ({
    name,
    label,
    disablePast = false,
    disableFuture = false,
    ongoing = false,
    disableEnd = false,
}) => {
    const convertDateToString = (d) => {
        return d.format("MM-DD-YYYY");
    };

    return (
        <Field name={name}>
            {({ form, field, meta }) => {
                return (
                    <MuiPickersUtilsProvider utils={MomentUtils}>
                        <DatePicker
                            id={name}
                            disableFuture={disableFuture}
                            disablePast={disablePast}
                            label={label}
                            value={form.values[name]}
                            disabled={ongoing && disableEnd}
                            onChange={(v) =>
                                form.setFieldValue(name, convertDateToString(v))
                            }
                            onBlur={field.onBlur}
                            fullWidth
                            disableToolbar
                            autoOk
                            openTo="year"
                            format="DD/MM/yyyy"
                            views={["year", "month", "date"]}
                            variant="inline"
                            inputVariant="outlined"
                            error={!!(meta.touched && meta.error)}
                            
                            invalidDateMessage="this is the built in error"
                        />
                        <ErrorMessage name={name}>
                            {(error) => {
                                return (
                                    <FormHelperText style={{ color: "red" }}>
                                        Required field.
                                    </FormHelperText>
                                );
                            }}
                        </ErrorMessage>
                    </MuiPickersUtilsProvider>
                );
            }}
        </Field>
    );
};

export default FormikDatePicker;

---

我面临着类似的问题。您是否找到了解决方案。不幸的是，在尝试了许多不同的失败选项后，我最终使用了一个材质ui的日期选择器……请问您最终使用了哪一个材质ui选择器？@DiligenceVagere TextField with type=“date”，看起来工作正常，没有任何问题，可以很容易地与其他组件一起使用，尽管不是很时尚

export const pageThree = object({
    "Country of residence": string("Please enter a valid country name.")
        .min(2, "Required field.")
        .required("Required field."),
    "City of residence": string("Please enter a valid city name.")
        .min(2, "Required field.")
        .required("Required field."),
    Nationality: string("Please enter a valid value.").required(
        "Required field."
    ),
    "Date of Birth": date("Required field.").required("Required field."),
});