pfadi-bussle/components/book/dateSelect.tsx

import React, { useContext } from 'react'
import { BookContext } from '../../context/book'
import InputWrapper from '../inputWrapper'
import Input from '../input'
import Calendar from '../calendar'

export default function DateSelect() {
  const { onChangeEvent, onChange, state } = useContext(BookContext)
  const { startDate, endDate } = state.formData

  const today = new Date().toISOString().substring(0, 10)

  return (
    <>
      <InputWrapper label="Datum" required>
        <Calendar
          start={startDate}
          end={endDate}
          onChange={onChange}
          className="my-6 max-w-lg"
        />
      </InputWrapper>
      <div className="flex flex-wrap -mx-3 mb-2">
        <div className="w-full md:w-2/5 px-3 mb-2 md:mb-0">
          <Input
            label="Von"
            type="date"
            className=""
            name="startDate"
            value={startDate || ''}
            onChange={onChangeEvent}
            min={today}
            required
          />
        </div>
        <div className="w-full md:w-2/5 px-3 mb-2 md:mb-0">
          <Input
            required
            label="Bis"
            type="date"
            className=""
            name="endDate"
            value={endDate || ''}
            placeholder="Von"
            onChange={onChangeEvent}
            min={startDate || today}
          />
        </div>
      </div>
    </>
  )
}