Эластичный UI DatePicker с формой React Hook и проверкой схемы Yup
Я пытаюсь интегрировать эластичный ui datepicker с формой реагирования и проверкой схемы Yup. Я знаю, что по умолчанию схема даты Yup ищет обычную дату js или строку, которая может быть проанализирована как таковая, тогда как эластичный ui datepicker принимает и выводит моменты для своих дат. Поэтому я попытался добавить в схему даты преобразователь, чтобы преобразовать значение в момент. Когда я пытаюсь это сделать, никогда не регистрируется, что я что-то выбрал для даты, и трансформатор никогда не запускается. Вот пример:
import React, { useState } from "react";
import styled from "styled-components";
import {
EuiButton,
EuiForm,
EuiFormRow,
EuiFieldText,
EuiPage,
EuiPageBody,
EuiPageContent,
EuiPageHeader,
EuiTitle,
EuiPageHeaderSection,
EuiDatePicker,
} from "@elastic/eui";
import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import moment from "moment";
import { addUser } from "./logic";
const Container = styled.div`
text-align: initial;
`;
const momentSchema = yup.date().clone().transform(function (value, originalValue) {
if (this.isType(value)) {
return value;
}
value = moment(originalValue);
return value.isValid() ? value.toDate() : new Date("");
});
export const FormsPage = () => {
const schema = yup.object().shape({
firstName: yup.string().required(),
lastName: yup.string().required(),
email: yup.string().email().required(),
dob: momentSchema.required(),
});
const [dob, setDob] = useState();
const { errors, handleSubmit, register } = useForm({
resolver: yupResolver(schema),
});
const dispatch = useDispatch();
const onDobChange = (date) => {
setDob(date);
};
const onSubmit = (data) => {
dispatch(addUser(data));
};
return (
<Container>
<EuiPage>
<EuiPageBody>
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="1">
<h1>Forms</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiPageContent>
<EuiForm
component="form"
onSubmit={handleSubmit(onSubmit)}
noValidate
>
<EuiFormRow
label="First Name"
isInvalid={!!errors.firstName}
error={errors.firstName?.message}
>
<EuiFieldText
name="firstName"
inputRef={register}
isInvalid={!!errors.firstName}
/>
</EuiFormRow>
<EuiFormRow
label="Last Name"
isInvalid={!!errors.lastName}
error={errors.lastName?.message}
>
<EuiFieldText
name="lastName"
inputRef={register}
isInvalid={!!errors.lastName}
/>
</EuiFormRow>
<EuiFormRow
label="Email"
isInvalid={!!errors.email}
error={errors.email?.message}
>
<EuiFieldText
name="email"
inputRef={register}
isInvalid={!!errors.email}
/>
</EuiFormRow>
<EuiFormRow
label="Date of Birth"
isInvalid={!!errors.dob}
error={errors.dob?.message}
>
<EuiDatePicker
name="dob"
inputRef={register}
isInvalid={!!errors.dob}
selected={dob}
onChange={onDobChange}
/>
</EuiFormRow>
<EuiFormRow>
<EuiButton type="submit" fill>
Submit
</EuiButton>
</EuiFormRow>
</EuiForm>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
</Container>
);
};
И вот что происходит:Требуется дата