React에서 DatePicker(react-datepicker)+reactstrap+formik 사용하기

하고 싶은 일

datepicker를 사용하면 CSS만 적용되지 않고 단독 검증이 됩니다. ReactStrap으로 외관을 정리하고 Formik로 검증하고 싶습니다.

완성

다음 느낌을 목표로 합니다.

준비

작업 장소와 필요한 모듈이 설치되어 있습니다.

create-react-app datepicker
cd datepicker
yarn add react-datepicker
yarn add bootstrap reactstrap moment formik yup

npm install --save bootstrap reactstrap moment formik yup

실시

점은 react-datepicker의custom Input에서 Reactstrap의 Input를 지정하는 곳입니다.
날짜의 검증은 우선 그 달 이외에 지정되면 오류가 발생합니다.
App.js

import React from 'react';
import './App.css';
import { Form, FormGroup, Label, Input, FormFeedback, Button } from 'reactstrap';
import { Formik } from 'formik';
import * as Yup from 'yup';
import moment from 'moment';

//react-datepicker
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
//for locale ja
import ja from 'date-fns/locale/ja';
registerLocale('ja', ja);


class App extends React.Component {

    handleOnSubmit = (values) => {
        alert(JSON.stringify(values));
    }

    render() {
        return (
            <React.Fragment>
                <div className="container">
                    <Formik
                        initialValues={{ email: '', startDate: moment(new Date()).format('YYYY/MM/DD') }}
                        onSubmit={this.handleOnSubmit}
                        validationSchema={Yup.object().shape({
                            email: Yup.string().email().required(),
                            startDate: Yup.string().required().test('checkDate', '当月を指定して下さい。', (picked) => {
                                const pickedMonth = moment(new Date(picked)).month() + 1;
                                const thisMonth = moment(new Date()).month() + 1;
                                if (pickedMonth === thisMonth) {
                                    return true;
                                } else {
                                    return false;
                                }
                            }),
                        })}
                    >
                        {
                            ({ handleSubmit, handleChange, handleBlur, values, errors, touched, setFieldValue }) => (
                                <Form onSubmit={handleSubmit} className="col-8 my-5">
                                    <FormGroup >
                                        <Label for="email">Email</Label>
                                        <Input
                                            type="email"
                                            name="email"
                                            id="email"
                                            onChange={handleChange}
                                            onBlur={handleBlur}
                                            invalid={Boolean(touched.email && errors.email)}
                                        />
                                        <FormFeedback>
                                            {errors.email}
                                        </FormFeedback>
                                    </FormGroup>
                                    <FormGroup>
                                        <legend className="col-form-label">開始日時</legend>
                                        <DatePicker
                                            locale="ja"
                                            name="startDate"
                                            id="startDate"
                                            value={values.startDate}
                                            dateFormat="YYYY/MM/DD"
                                            customInput={<Input invalid={Boolean(errors.startDate)} />}
                                            onChange={date => setFieldValue("startDate", moment(date).format('YYYY/MM/DD'))}
                                        />
                                        <p className="text-danger small">{errors.startDate}</p>
                                    </FormGroup>
                                    <div className="my-3">
                                        <Button type="submit">送信</Button>
                                    </div>
                                </Form>
                            )
                        }
                    </Formik>
                </div>
            </React.Fragment>
        );
    }
}

export default App;