Material-UI 日期选择器组件在 Safari 上无法正常工作

Question

我正在构建一个 React 应用程序并material-ui-pickers在一个也使用formik表单和yup验证的自定义组件中使用日期选择器组件。该组件在不同的浏览器上运行良好，但是在 Safari 上给我带来了组件内部的错误（使用 formik+yup 验证）和 Date Picker 组件的内置 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;

是的验证：

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."),
});