React-datepicker с формой Formik - PullRequest
Новая
       67

React-datepicker с формой Formik

0 голосов
/ 26 мая 2019

Я пытаюсь использовать response-datepicker в форме Formik.

У меня есть: 

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";


class Fuate extends React.Component {
    state = {
        dueDate: new Date()

    }

<Formik
                initialValues={initialValues}
                validationSchema={Yup.object().shape({
                    title: Yup.string().required("A title is required "),
                })}

                onSubmit={this.handleSubmit}

                render={({ 
                    errors, 
                    status, 
                    touched, 
                    setFieldValue,
                    setFieldTouched, 
                    handleChange, 
                    handleBlur,
                    handleSubmit, 
                    isSubmitting, 
                    dirty, 
                    values 
                }) => {

                return (
                    <div>
            ...

<DatePicker
                                            name={'dueDate'}
                                            value={values['dueDate']}
                                            onChange={e => setFieldValue('dueDate', e)}
                                        />
                                        <DatePicker
                                        style={{ width: 180 }}
                                        date={values.dueDate}
                                        mode="date"
                                        format="YYYY-MM-DD"
                                        minDate={Date.now.toString()}
                                        maxDate="2050-06-01"
                                        confirmBtnText="Confirm"
                                        cancelBtnText="Cancel"
                                        showIcon={false}
                                        customStyles={{
                                            dateInput: {
                                            marginLeft: 0,
                                            borderColor: "#fff"
                                            }
                                        }}
                                        onDateChange={date => setFieldValue("dueDate", date)}
                                        onTouch={setFieldTouched}
                                        />

Для обеих этих опций форма отображается, я могу выбрать датув календаре, но не отображается в поле, и значение состояния не обновляется при выборе.

В консоли нет ошибок, но в предупреждении говорится:

Начиная с v2.0.0-beta.1 date-fns не принимает строки в качестве аргументов.Пожалуйста, используйте parseISO для разбора строк.См .: toDate @ index.js: 45

Я попытался установить начальное состояние: 

dueDate: new Date().toISOString(),

, но это не имеет значения.

Я виделмного постов о настройке с помощью средства выбора даты в Antd, но не могу найти инструкции, как это сделать с помощью response-datepicker.

1 Ответ

0 голосов
/ 27 мая 2019

response-datepicker может использоваться с Formik с использованием setFieldValue , 

const DatePickerField = ({ name, value, onChange }) => {
    return (
        <DatePicker
            selected={(value && new Date(value)) || null}
            onChange={val => {
                onChange(name, val);
            }}
        />
    );
};

const App = () => (
    <Formik
        initialValues={{ date: "" }}
        ...
    >
        {props => {
            const {
                values,
                handleSubmit,
                setFieldValue
                ...
            } = props;
            return (
                <form onSubmit={handleSubmit}>
                    <DatePickerField
                        name="date"
                        value={values.date}
                        onChange={setFieldValue}
                    />
                    ...

CodeSandbox demo здесь

...