<input type=date /> とReact Hook Formで日付のデフォルト値が表示されない時の対処法

これはなに？

Chakra UIのDatePicker（<Input type="date" >）をReact Hook Formで使った時にデフォルト値が表示されなくて困ったので記事に残しました。

この記事が同様の問題で悩んでいる人の助けになれば嬉しいです。

この記事のゴール

以下の理解を得ることをゴールとします

• Chakra UIの<Input type="date"/>のデフォルト値を表示する方法が分かること

環境

ツール・ライブラリ	用途	バージョン
React	フロントエンドのFW	18.2.0
Chakra UI	UIライブラリ	2.3.6
React Hook Form	フォームバリデーションツール	7.38.0
yup	バリデーションのためのスキーマビルダー	0.32.11

課題

誕生日を入力するフォームにデフォルトに値を今日の日付を設定したいとします。

そうするとコードは以下のようになります。

import {
  Container,
  FormControl,
  FormErrorMessage,
  FormLabel,
  Heading,
  Input,
} from '@chakra-ui/react'
import { yupResolver } from '@hookform/resolvers/yup'
import { useForm } from 'react-hook-form'
import * as yup from 'yup'
import type { NextPage } from 'next'

const Sample: NextPage = () => {
  const validations = yup.object().shape({
    birthDate: yup.date().required('誕生日を入力してください'),
  })

  const defaultBirthDate = new Date() //デフォルト値を設定

  const {
    register,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(validations),
    defaultValues: {
      birthDate: defaultBirthDate,
    },
  })

  const birthDateErrorMessage = errors
    ? (errors['birthDate']?.message as string)
    : undefined

  return (
    <>
      <Container py={8} px={4}>
        <Heading>ダメな例</Heading>
        <form>
          <FormControl>
            <FormLabel mt={4}>生年月日</FormLabel>
            {birthDateErrorMessage && (
              <FormErrorMessage>{birthDateErrorMessage}</FormErrorMessage>
            )}
            <Input {...register('birthDate')} type={'date'} />
          </FormControl>
        </form>
      </Container>
    </>
  )
}

export default Sample

が、ローカルで起動してみると以下の画像のようにdefaultBirthDateで設定したデフォルト値が表示されません。

解決方法

Chromeのコンソールを見てみると以下のような警告が表示されていました。

The specified value "Sat Oct 29 2022 20:23:53 GMT+0900 (\u65E5\u672C\u6A19\u6E96\u6642)" does not conform to the required format, "yyyy-MM-dd".

つまりDate型をbirthDateのdefaultValueに渡すのではなく、yyyy-MM-ddで渡すことで表示されるとのことでした。

~~~ 省略 ~~~

const defaultBirthDate = new Date()
  const formattedDefaultBirthDate = format(defaultBirthDate, 'yyyy-MM-dd', {
    locale: ja,
  }) //デフォルト値を設定

~~~ 省略 ~~~

実際にyyyy-MM-ddのフォーマットで渡してあげると正常に表示されるようになりました。

今回はdate-fnsでフォーマットの変更をするようにしました。

余談

Date型だからブラウザ側でよしなに表示してくれると思いきや、思わぬトラップでした。

色々とググってみるとinputのdateの時はyyyy-MM-ddにしなさいという旨の記事にもありました。

先人の知恵に感謝ですね。

ではまた！