improve client a bit

components/dateSelect.js

@@ -9,13 +9,14 @@ import moment from 'moment'
 import 'react-dates/initialize'
 import { DateRangePicker, SingleDatePicker } from 'react-dates'
 
+import Required from './required'
 import { dateFormat } from '../lib/dateHelper'
 
 const fetcher = (path) => fetch(path).then((r) => r.json())
 
 export default function DateSelect() {
   const [focusedInput, setFocusedInput] = useState(null)
-  const { state, onChange, onChangeEvent } = useContext(WizardContext)
+  const { state, onChange } = useContext(WizardContext)
   const { data: daysBooked, error: fetchBookedOnError } = useSWR(
     '/api/daysbooked',
     fetcher
@@ -41,7 +42,9 @@ export default function DateSelect() {
   return (
     <>
       <Form.Group controlId="dateSelect">
-        <Form.Label>Willst du einen odere mehrere Tage buchen?</Form.Label>
+        <Form.Label>
+          Willst du einen odere mehrere Tage buchen? <Required />
+        </Form.Label>
         <Form.Check
           type="radio"
           id={'multipleDays-single'}
@@ -78,7 +81,7 @@ export default function DateSelect() {
       {multipleDays !== null && (
         <Form.Group>
           <Form.Label component="legend" style={{ display: 'block' }}>
-            Datum
+            Datum <Required />
           </Form.Label>
           {multipleDays === false && (
             <SingleDatePicker
@@ -86,6 +89,7 @@ export default function DateSelect() {
               date={startDate && moment(startDate)}
               placeholder="Datum"
               numberOfMonths={1}
+              required
               onDateChange={(date) =>
                 onChange({
                   startDate: date && dateFormat(date),
@@ -104,6 +108,7 @@ export default function DateSelect() {
               startDateId="startDate"
               startDatePlaceholderText="Start"
               endDatePlaceholderText="Ende"
+              required
               numberOfMonths={1}
               endDate={endDate && moment(endDate)}
               endDateId="endDate"