Replaced date time pickers with another compoent to better choose time. BOD-122

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -3,40 +3,35 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 
 export default function ScheduleJobModalComponent({
   existingAppointments,
   appData,
   setAppData,
   formData,
-  setFormData
+  setFormData,
 }) {
   const { t } = useTranslation();
   //TODO Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
   return (
     <Row>
       <Col span={14}>
-        <Tabs defaultActiveKey="1">
-          <Tabs.TabPane tab="SMART Scheduling" key="auto">
+        <Tabs defaultActiveKey='1'>
+          <Tabs.TabPane tab='SMART Scheduling' key='auto'>
             Automatic Job Selection.
           </Tabs.TabPane>
-          <Tabs.TabPane tab="Manual Scheduling" key="manual">
+          <Tabs.TabPane tab='Manual Scheduling' key='manual'>
             <Row>
               Manual Job Selection Scheduled Time
-              <DatePicker
-                value={appData.start}
-                onChange={e => {
-                  setAppData({ ...appData, start: e });
-                }}
-              />
-              <TimePicker
-                value={appData.start}
-                format={"HH:mm"}
-                minuteStep={15}
-                onChange={e => {
-                  setAppData({ ...appData, start: e });
-                }}
-              />
+              <div style={{height: "300px"}}>
+                <DateTimePicker
+                  value={appData.start}
+                  onChange={(e) => {
+                    setAppData({ ...appData, start: e });
+                  }}
+                />
+              </div>
             </Row>
           </Tabs.TabPane>
         </Tabs>
@@ -48,10 +43,9 @@ export default function ScheduleJobModalComponent({
         }
         <Checkbox
           defaultChecked={formData.notifyCustomer}
-          onChange={e =>
+          onChange={(e) =>
             setFormData({ ...formData, notifyCustomer: e.target.checked })
-          }
-        >
+          }>
           {t("jobs.labels.appointmentconfirmation")}
         </Checkbox>
       </Col>