go with react-bootstrap for now

components/dateSelect.js

@@ -1,10 +1,9 @@
 import { useContext } from 'react'
 import { AppContext, ACTIONS } from '../context/appStore'
 
-import TimeSelect from './timeSelect'
+import Form from 'react-bootstrap/Form'
 
 import moment from 'moment'
-
 import 'react-dates/initialize'
 import { DateRangePicker, SingleDatePicker } from 'react-dates'
 
@@ -31,9 +30,13 @@ export default function DateSelect() {
 
   return (
     <>
-      <div>
+      <Form.Group>
+        <Form.Label component="legend" style={{ display: 'block' }}>
+          Datum
+        </Form.Label>
         {state.multipleDays === false && (
           <SingleDatePicker
+            small={true}
             date={startDate && moment(startDate)}
             onDateChange={(date) =>
               dispatch({
@@ -54,6 +57,7 @@ export default function DateSelect() {
         )}
         {state.multipleDays === true && (
           <DateRangePicker
+            small={true}
             startDate={startDate && moment(startDate)}
             startDateId="bussle_start_date_id"
             endDate={endDate && moment(endDate)}
@@ -78,25 +82,7 @@ export default function DateSelect() {
             minDate={moment()}
           />
         )}
-      </div>
-      <TimeSelect
-        id="pickup"
-        name="pickupTime"
-        label="Abholung Uhrzeit"
-        value={pickupTime}
-        setValue={(payload) =>
-          dispatch({ type: ACTIONS.SET_PICKUP_TIME, payload })
-        }
-      />
-      <TimeSelect
-        id="dropoff"
-        name="dropoffTime"
-        label="Rückgabe Uhrzeit"
-        value={dropoffTime}
-        setValue={(payload) =>
-          dispatch({ type: ACTIONS.SET_DROPOFF_TIME, payload })
-        }
-      />
+      </Form.Group>
     </>
   )
 }