pfadi-bussle/components/wizard/dateSelect.tsx

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

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>
        <label className="flabel inline-block mr-3" htmlFor="startDate">
          Von
        </label>
        <input
          required
          type="date"
          name="startDate"
          value={startDate}
          onChange={onChangeEvent}
          min={today}
        />
        <label className="flabel inline-block ml-6 mr-3" htmlFor="endDate">
          Bis
        </label>
        <input
          required
          type="date"
          name="endDate"
          value={endDate}
          placeholder="Von"
          onChange={onChangeEvent}
          min={startDate || today}
        />
      </InputWrapper>
    </>
  )
}