[Astro] 日付入力

export default {
  content: [
    ...
    './node_modules/react-tailwindcss-datepicker/dist/index.esm.{js,ts}'
  ],

import { useState } from 'react'
import Datepicker, { type DateValueType } from 'react-tailwindcss-datepicker'

export default function DateForm() {
  const [eventDate, setEventDate] = useState<DateValueType>({
    startDate: null,
    endDate: null
  })
  const [eventDate2, setEventDate2] = useState<DateValueType>({
    startDate: null,
    endDate: null
  })
  const handleDateChange = (newValue: DateValueType) => {
    setEventDate(newValue)
  }
  const handleDateChange2 = (newValue: DateValueType) => {
    setEventDate2(newValue)
  }

  return (
    <form>
      <div className="mb-4">
        <label htmlFor="event-date" className="block text-sm font-medium text-gray-700">
          日付入力パターン
        </label>
        <Datepicker
          value={eventDate}
          asSingle={true}
          useRange={false}
          onChange={handleDateChange}
          displayFormat={'YYYY/MM/DD'}
          i18n="ja"
          inputClassName="w-full px-3 py-2.5 rounded-md border-2 focus-visible:outline-none focus:border-primary-500"
          primaryColor={'indigo'}
        />
      </div>
      <div className="mb-4">
        <label htmlFor="event-date2" className="block text-sm font-medium text-gray-700">
          期間入力パターン
        </label>
        <Datepicker
          value={eventDate2}
          asSingle={false}
          useRange={false}
          onChange={handleDateChange2}
          displayFormat={'YYYY/MM/DD'}
          i18n="ja"
          inputClassName="w-full px-3 py-2.5 rounded-md border-2 focus-visible:outline-none focus:border-primary-500"
          primaryColor={'indigo'}
        />
      </div>
    </form>
  )
}

import { zodResolver } from '@hookform/resolvers/zod'
import { Controller, useForm, type FieldErrors } from 'react-hook-form'
import Datepicker from 'react-tailwindcss-datepicker'
import { z } from 'zod'

// フィールドのスキーマを定義
const schema = z.object({
  eventDate: z.object({
    startDate: z.date({
      invalid_type_error: '日付期間は必須です'
    }),
    endDate: z.date({})
  })
})

// フォームの入力値の型を上述のスキーマから作成
type FormValues = z.infer<typeof schema>

export default function ValidateForm2() {
  const {
    control,
    handleSubmit,
    reset,
    formState: { errors }
  } = useForm<FormValues>({
    resolver: zodResolver(schema),

    // 初期値を設定
    defaultValues: {
      eventDate: {
        startDate: new Date('2024-09-21'),
        endDate: new Date('2024-09-21')
      }
    }
  })
  const onSubmit = (data: FormValues) => {
    alert('送信しました')
  }
  const onInvalid = (errors: FieldErrors<FormValues>) => {
    console.log('バリデーションエラー発生')
    console.log(errors)
  }
  const handleReset = (e: React.FormEvent) => {
    reset()
  }
  return (
    <form onSubmit={handleSubmit(onSubmit, onInvalid)}>
      <div className="mb-4">
        <label htmlFor="eventdate" className="block text-sm font-medium text-gray-700">
          日付期間
        </label>
        <Controller
          name="eventDate"
          control={control}
          render={({ field: { onChange, value } }) => (
            <Datepicker
              inputId="eventdate"
              value={value}
              asSingle={false}
              useRange={false}
              onChange={onChange}
              displayFormat={'YYYY/MM/DD'}
              i18n="ja"
              inputClassName="w-full px-3 py-2.5 rounded-md border-2 focus-visible:outline-none focus:border-primary-500"
              primaryColor={'indigo'}
            />
          )}
        />
        {errors.eventDate?.startDate && (
          <p className="mt-2 text-sm text-red-600 dark:text-red-500">
            <span className="font-medium">{errors.eventDate.startDate.message}</span>
          </p>
        )}
      </div>
      <div className="flex justify-start">
        <button
          type="button"
          className="mr-2 rounded-md bg-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-400"
          onClick={handleReset}
        >
          リセット
        </button>
        <button
          type="submit"
          className="rounded-md bg-primary-500 px-4 py-2 text-white hover:bg-primary-600"
        >
          送信
        </button>
      </div>
    </form>
  )
}