jannikbuschke / formik-antd

Simple declarative bindings for Ant Design and Formik.

Home Page:https://codesandbox.io/s/github/jannikbuschke/formik-antd-example

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error while selecting date in DatePicker

Arshazar opened this issue · comments

               <Formik
                initialValues={{
                    id: filter !== null ? filter.id : '',
                    status: filter !== null ? filter.status : '',
                    created_at_from: filter !== null ? filter.created_at_from : '',
                }}
                validationSchema={Yup.object().shape({
                    id: Yup.number(),
                    status: Yup.string(),
                    created_at_from: Yup.string(),
                })}
                onSubmit={(fields, { resetForm }) => {
                    onSearch(fields)
                    resetForm()
                }}
            >
                {({ values, handleChange, handleBlur, submitForm, isSubmitting }) => (
                    <Form layout="vertical">
                        <div>
                            <Form.Item name="id" label="ID" className="form-item">
                                <Input
                                    id="formId"
                                    type="number"
                                    name="id"
                                    placeholder="ID"
                                    onChange={handleChange}
                                    onBlur={handleBlur}
                                    value={values.id}
                                />
                            </Form.Item>
                            <Form.Item name="status" label="Status" className="form-item">
                                <Select
                                    id="formStatus"
                                    name="status"
                                    placeholder="Status"
                                    onChange={handleChange}
                                    onBlur={handleBlur}
                                    value={values.status}
                                >
                                    <Select.Option value="">
                                        <p />
                                    </Select.Option>
                                    <Select.Option value="active">
                                        <p>active</p>
                                    </Select.Option>
                                    <Select.Option value="waiting">
                                        <p>waiting</p>
                                    </Select.Option>
                                    <Select.Option value="banned">
                                        <p>banned</p>
                                    </Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name="created_at_from"
                                label="Created At From"
                                className="form-item"
                            >
                                <DatePicker
                                    name="created_at_from"
                                    onBlur={handleBlur}
                                    onChange={handleChange}
                                    value={values.created_at_from}
                                    showTime
                                />
                            </Form.Item>
                        </div>
                        <br />
                        {isSubmitting}
                        <br />
                        <div className="form-buttons">
                            <SubmitButton
                                className="submit-button"
                                type="primary"
                                htmlType="submit"
                                disabled={isSubmitting}
                                onClick={submitForm}
                            >
                                Search
                            </SubmitButton>
                            <SubmitButton
                                className="cancel-button"
                                type="default"
                                htmlType="button"
                                disabled={isSubmitting}
                                onClick={onHide}
                            >
                                Cancel
                            </SubmitButton>
                        </div>
                    </Form>
                )}
            </Formik>

**

Error: TypeError: can't access property "type", target is undefined
Also: TypeError: date.clone is not a function

**

Using setFieldValue instead of handleChange function solved the issue!

                                <DatePicker
                                    id="formCreatedAtFrom"
                                    name="created_at_from"
                                    onBlur={handleBlur}
                                    onChange={(e) =>
                                        setFieldValue('created_at_from', e)
                                    }
                                    value={values.created_at_from}
                                    showTime
                                />