pfadi-bussle/components/wizard/dateSelect.tsx

import React, { useContext } from 'react'
import { WizardContext } from './context/wizardStore'
import InputWrapper from '../inputWrapper'
import Calendar from './calendar'

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

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

  return (
    <>
      <InputWrapper label="Datum" required>
        <Calendar className="m-6" />
        <div className="inline-block mr-6">
          <label className="flabel inline-block w-6 mr-3" htmlFor="startDate">
            Von
          </label>
          <input
            required
            type="date"
            name="startDate"
            value={startDate || ''}
            onChange={onChangeEvent}
            min={today}
          />
        </div>
        <div className="inline-block">
          <label className="flabel inline-block w-6 mr-3" htmlFor="endDate">
            Bis
          </label>
          <input
            required
            type="date"
            name="endDate"
            value={endDate || ''}
            placeholder="Von"
            onChange={onChangeEvent}
            min={startDate || today}
          />
        </div>
      </InputWrapper>
    </>
  )
}