diff --git a/app/helpers/form_helper.rb b/app/helpers/form_helper.rb
index b072ba3aef8..46333c7427b 100644
--- a/app/helpers/form_helper.rb
+++ b/app/helpers/form_helper.rb
@@ -398,6 +398,10 @@ def date_local_f(f, attr, options = {})
     react_form_input('date', f, attr, options)
   end
 
+  def time_local_f(f, attr, options = {})
+    react_form_input('time', f, attr, options)
+  end
+
   def datetime_local_f(f, attr, options = {})
     react_form_input('dateTime', f, attr, options)
   end
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DateConstants.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DateConstants.js
deleted file mode 100644
index e2c0897527b..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DateConstants.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const YEAR = 'YEAR';
-export const MONTH = 'MONTH';
-export const DAY = 'DAY';
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DateInput.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DateInput.js
deleted file mode 100644
index 7c5d6aed346..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DateInput.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { addMonths } from './helpers';
-import MonthView from './MonthView';
-import YearView from './YearView';
-import DecadeView from './DecadeView';
-import { YEAR, DAY, MONTH } from './DateConstants';
-
-class DateInput extends React.Component {
-  state = {
-    date: new Date(this.props.date),
-    typeOfDateInput: this.props.typeOfDateInput,
-  };
-  static getDerivedStateFromProps(props, state) {
-    if (props.date !== state.date) {
-      return {
-        date: props.date,
-        typeOfDateInput: props.typeOfDateInput,
-      };
-    }
-    return null;
-  }
-  getPrevMonth = () => {
-    const { date } = this.state;
-    this.setState({ date: addMonths(date, -1) });
-  };
-  getNextMonth = () => {
-    const { date } = this.state;
-    this.setState({ date: addMonths(date, 1) });
-  };
-  setSelected = day => {
-    this.setState({
-      date: day,
-    });
-    this.props.setSelected(day);
-  };
-  toggleDateView = (type = null) => {
-    this.setState({
-      typeOfDateInput: type,
-    });
-  };
-  getDateViewByType = type => {
-    const { date, locale, weekStartsOn, setSelected } = this.props;
-    switch (type) {
-      case DAY:
-        return (
-          <DecadeView
-            date={date}
-            setSelected={setSelected}
-            toggleDateView={this.toggleDateView}
-          />
-        );
-      case YEAR:
-        return (
-          <YearView
-            date={date}
-            setSelected={setSelected}
-            locale={locale}
-            toggleDateView={this.toggleDateView}
-          />
-        );
-      default:
-        return (
-          <MonthView
-            date={date}
-            setSelected={setSelected}
-            locale={locale}
-            weekStartsOn={weekStartsOn}
-            toggleDateView={this.toggleDateView}
-          />
-        );
-    }
-  };
-  render() {
-    const { className } = this.props;
-    const { typeOfDateInput } = this.state;
-    return (
-      <div className={classNames('datepicker', className)}>
-        {this.getDateViewByType(typeOfDateInput)}
-      </div>
-    );
-  }
-}
-
-DateInput.propTypes = {
-  date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  setSelected: PropTypes.func,
-  locale: PropTypes.string,
-  weekStartsOn: PropTypes.number,
-  className: PropTypes.string,
-  typeOfDateInput: PropTypes.string,
-};
-
-DateInput.defaultProps = {
-  setSelected: null,
-  date: new Date(),
-  locale: 'en-US',
-  weekStartsOn: 1,
-  className: '',
-  typeOfDateInput: MONTH,
-};
-export default DateInput;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DateInput.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DateInput.test.js
deleted file mode 100644
index 2a4a564196e..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DateInput.test.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import DateInput from './DateInput';
-
-test('DateInput is working properly', () => {
-  const component = shallow(<DateInput date="1/21/2019 , 2:22:31 PM" />);
-
-  expect(component.render()).toMatchSnapshot();
-});
-
-test('DateInput changes selected on click', () => {
-  const setSelected = jest.fn();
-  const component = mount(
-    <DateInput date="1/21/2019 , 2:22:31 PM" setSelected={setSelected} />
-  );
-  component
-    .find('.weekend')
-    .first()
-    .simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('2019-01-04   14:22:31'));
-});
-
-test('DateInput toggles view to years', () => {
-  const component = mount(<DateInput date="1/21/2019 , 2:22:31 PM" />);
-  component
-    .find('.picker-switch')
-    .first()
-    .simulate('click');
-  expect(component.render()).toMatchSnapshot();
-});
-test('DateInput toggles view to decades', () => {
-  const component = mount(<DateInput date="1/21/2019 , 2:22:31 PM" />);
-  component
-    .find('.picker-switch')
-    .first()
-    .simulate('click');
-  component
-    .find('.picker-switch')
-    .first()
-    .simulate('click');
-  expect(component.render()).toMatchSnapshot();
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Day.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Day.js
deleted file mode 100644
index b0dbdaebc35..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Day.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const Day = ({ day, setSelected, classNamesArray }) => {
-  const date = day.getDate();
-  return (
-    <td
-      className={classNames('day', classNamesArray)}
-      data-day={date}
-      onClick={() => {
-        setSelected(day);
-      }}
-    >
-      {date}
-    </td>
-  );
-};
-
-Day.propTypes = {
-  day: PropTypes.instanceOf(Date).isRequired,
-  classNamesArray: PropTypes.object,
-  setSelected: PropTypes.func,
-};
-
-Day.defaultProps = {
-  setSelected: null,
-  classNamesArray: [],
-};
-export default Day;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Day.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Day.test.js
deleted file mode 100644
index ccee6ef4d7d..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Day.test.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Day from './Day';
-
-test('Day is working properly', () => {
-  const day = new Date('2019-01-04 14:22:31');
-  const currDate = new Date('2019-01-02 12:22:31');
-  const selectedDate = new Date('2019-01-05 18:22:31');
-  const component = shallow(
-    <Day
-      day={day}
-      currDate={currDate}
-      selectedDate={selectedDate}
-      classNamesArray={{ weekend: true }}
-    />
-  );
-
-  expect(component.render()).toMatchSnapshot();
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeView.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeView.js
deleted file mode 100644
index ab8c72d4077..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeView.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { times } from 'lodash';
-import { addYears } from './helpers';
-import { noop } from '../../../../common/helpers';
-import { DecadeViewHeader } from './DecadeViewHeader';
-import { DecadeViewTable } from './DecadeViewTable';
-import { YEAR } from './DateConstants';
-
-class DecadeView extends React.Component {
-  state = {
-    date: new Date(this.props.date),
-    selectedDate: new Date(this.props.date),
-  };
-  getYearArray = () => {
-    const { date } = this.state;
-    date.setFullYear(Math.floor(date.getFullYear() / 10) * 10);
-    return times(12, i => addYears(date, i).getFullYear());
-  };
-  getPrevDecade = () => {
-    const { date } = this.state;
-    this.setState({ date: addYears(date, -10) });
-  };
-  getNextDecade = () => {
-    const { date } = this.state;
-    this.setState({ date: addYears(date, 10) });
-  };
-  setSelectedYear = year => {
-    const { setSelected, toggleDateView } = this.props;
-    const { date } = this.state;
-    date.setFullYear(year);
-    setSelected(date);
-    toggleDateView(YEAR);
-  };
-
-  render() {
-    const { date, selectedDate } = this.state;
-    const currDecade = Math.floor(date.getFullYear() / 10) * 10;
-    const selectedYear = selectedDate.getFullYear();
-    const yearArray = this.getYearArray();
-    return (
-      <div className="datepicker-years">
-        <table className="table-condensed">
-          <DecadeViewHeader
-            currDecade={currDecade}
-            getNextDecade={this.getNextDecade}
-            getPrevDecade={this.getPrevDecade}
-          />
-          <DecadeViewTable
-            selectedYear={selectedYear}
-            yearArray={yearArray}
-            setSelectedYear={this.setSelectedYear}
-          />
-        </table>
-      </div>
-    );
-  }
-}
-
-DecadeView.propTypes = {
-  date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  setSelected: PropTypes.func,
-  toggleDateView: PropTypes.func,
-};
-
-DecadeView.defaultProps = {
-  setSelected: noop,
-  toggleDateView: noop,
-  date: new Date(),
-};
-export default DecadeView;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeView.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeView.test.js
deleted file mode 100644
index a45612aec9e..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeView.test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import DecadeView from './DecadeView';
-
-test('DecadeView is working properly', () => {
-  const date = new Date('1/1/2020 , 2:22:31 PM');
-  const component = shallow(<DecadeView date={date} />);
-
-  expect(component.render()).toMatchSnapshot();
-});
-
-test('Edit year DecadeView', () => {
-  const date = new Date('2/21/2019 , 2:22:31 PM');
-  const setSelected = jest.fn();
-  const component = mount(<DecadeView date={date} setSelected={setSelected} />);
-  expect(component.render()).toMatchSnapshot();
-  component
-    .find('.year')
-    .first()
-    .simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('2/21/2010,   2:22:31 PM'));
-});
-
-test('Edit decade DecadeView', () => {
-  const date = new Date('2/21/2019 , 2:22:31 PM');
-  const setSelected = jest.fn();
-  const component = mount(<DecadeView date={date} setSelected={setSelected} />);
-  expect(component.render()).toMatchSnapshot();
-  component
-    .find('.next')
-    .first()
-    .simulate('click');
-  component
-    .find('.year')
-    .first()
-    .simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('2/21/2020 , 2:22:31 PM'));
-  component
-    .find('.prev')
-    .first()
-    .simulate('click');
-  component
-    .find('.year')
-    .first()
-    .simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('2/21/2010 , 2:22:31 PM'));
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewHeader.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewHeader.js
deleted file mode 100644
index 5b94558ea5c..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewHeader.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { noop } from '../../../../common/helpers';
-
-export const DecadeViewHeader = ({
-  currDecade,
-  getPrevDecade,
-  getNextDecade,
-}) => (
-  <thead>
-    <tr>
-      <th className="prev" onClick={getPrevDecade}>
-        <span className="glyphicon glyphicon-chevron-left" />
-      </th>
-      <th className="picker-switch" data-action="pickerSwitch" colSpan="5">
-        {`${currDecade}-${currDecade + 11}`}
-      </th>
-      <th className="next" onClick={getNextDecade}>
-        <span className="glyphicon glyphicon-chevron-right" />
-      </th>
-    </tr>
-  </thead>
-);
-
-DecadeViewHeader.propTypes = {
-  currDecade: PropTypes.number,
-  getPrevDecade: PropTypes.func,
-  getNextDecade: PropTypes.func,
-};
-DecadeViewHeader.defaultProps = {
-  currDecade: 20,
-  getPrevDecade: noop,
-  getNextDecade: noop,
-};
-export default DecadeViewHeader;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewHeader.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewHeader.test.js
deleted file mode 100644
index 0fba60bfb15..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewHeader.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { DecadeViewHeader } from './DecadeViewHeader';
-
-test('DecadeViewHeader is working properly', () => {
-  const component = shallow(<DecadeViewHeader currDecade={2010} />);
-
-  expect(component.render()).toMatchSnapshot();
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewTable.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewTable.js
deleted file mode 100644
index d55eb855345..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewTable.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { noop } from '../../../../common/helpers';
-
-export const DecadeViewTable = ({
-  yearArray,
-  selectedYear,
-  setSelectedYear,
-}) => (
-  <tbody>
-    <tr>
-      <td colSpan="7">
-        {yearArray.map(year => (
-          <span
-            onClick={() => setSelectedYear(year)}
-            className={`year ${year === selectedYear ? 'active' : ''}`}
-            key={year}
-          >
-            {year}
-          </span>
-        ))}
-      </td>
-    </tr>
-  </tbody>
-);
-
-DecadeViewTable.propTypes = {
-  yearArray: PropTypes.array,
-  selectedYear: PropTypes.number,
-  setSelectedYear: PropTypes.func,
-};
-DecadeViewTable.defaultProps = {
-  yearArray: [],
-  selectedYear: new Date().getFullYear(),
-  setSelectedYear: noop,
-};
-
-export default DecadeViewTable;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewTable.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewTable.test.js
deleted file mode 100644
index 74dbd93fa9b..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/DecadeViewTable.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { DecadeViewTable } from './DecadeViewTable';
-
-test('DecadeViewTable is working properly', () => {
-  const component = shallow(
-    <DecadeViewTable
-      selectedYear={2019}
-      yearArray={[
-        2010,
-        2011,
-        2012,
-        2013,
-        2014,
-        2015,
-        2016,
-        2017,
-        2018,
-        2019,
-        2020,
-        2021,
-      ]}
-    />
-  );
-
-  expect(component.render()).toMatchSnapshot();
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Header.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Header.js
deleted file mode 100644
index 0e3c614e343..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Header.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Icon } from '@patternfly/react-core';
-import { AngleLeftIcon, AngleRightIcon } from '@patternfly/react-icons';
-import { YEAR } from './DateConstants';
-import { getWeekArray } from './HeaderHelpers';
-
-const Header = ({
-  getNextMonth,
-  getPrevMonth,
-  toggleDateView,
-  weekStartsOn,
-  date,
-  locale,
-}) => {
-  date = new Date(date);
-  const month = Intl.DateTimeFormat(locale, {
-    month: 'long',
-  }).format(date);
-  const year = date.getFullYear();
-  const daysOfTheWeek = getWeekArray(weekStartsOn);
-  return (
-    <thead>
-      <tr>
-        <th className="prev" onClick={getPrevMonth}>
-          <Icon>
-            <AngleLeftIcon />
-          </Icon>
-        </th>
-        <th
-          className="picker-switch"
-          colSpan="5"
-          onClick={() => toggleDateView(YEAR)}
-        >
-          {month} {year}
-        </th>
-        <th className="next" onClick={getNextMonth}>
-          <Icon>
-            <AngleRightIcon />
-          </Icon>
-        </th>
-      </tr>
-      <tr>
-        {daysOfTheWeek.map((day, idx) => (
-          <th key={idx} className="dow">
-            {day}
-          </th>
-        ))}
-      </tr>
-    </thead>
-  );
-};
-
-Header.propTypes = {
-  date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  getPrevMonth: PropTypes.func,
-  getNextMonth: PropTypes.func,
-  toggleDateView: PropTypes.func,
-  locale: PropTypes.string,
-  weekStartsOn: PropTypes.number,
-};
-
-Header.defaultProps = {
-  date: new Date(),
-  getPrevMonth: null,
-  getNextMonth: null,
-  toggleDateView: null,
-  locale: 'en-US',
-  weekStartsOn: 1,
-};
-export default Header;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Header.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Header.test.js
deleted file mode 100644
index f88d12f8786..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/Header.test.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Header from './Header';
-
-test('Header is working properly', () => {
-  const date = new Date('2019-01-04 14:22:31');
-  const component = shallow(<Header date={date} />);
-
-  expect(component.render()).toMatchSnapshot();
-});
-
-test('Header is working properly with different week start', () => {
-  const date = new Date('2019-01-04 14:22:31');
-  const component = shallow(<Header date={date} weekStartsOn={5} />);
-
-  expect(component.render()).toMatchSnapshot();
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/HeaderHelpers.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/HeaderHelpers.js
deleted file mode 100644
index 8227a4c7683..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/HeaderHelpers.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { times } from 'lodash';
-import { addDays, getWeekStart } from './helpers';
-
-export const getWeekArray = (weekStartsOn, locale) => {
-  const weekStart = getWeekStart(new Date());
-  const dayFormat =
-    Intl.DateTimeFormat(locale, { weekday: 'short' }).format(weekStart).length >
-    3
-      ? 'narrow'
-      : 'short';
-  return times(7, i =>
-    Intl.DateTimeFormat(locale, { weekday: dayFormat })
-      .format(addDays(weekStart, (i + weekStartsOn) % 7))
-      .slice(0, 2)
-  );
-};
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/MonthView.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/MonthView.js
deleted file mode 100644
index 9ea9330ee63..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/MonthView.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { chunk, times } from 'lodash';
-
-import Day from './Day';
-import {
-  addDays,
-  addMonths,
-  getMonthStart,
-  isEqualDate,
-  isWeekend,
-} from './helpers';
-import Header from './Header';
-
-class MonthView extends React.Component {
-  state = {
-    selectedDate: new Date(this.props.date),
-    date: new Date(this.props.date),
-  };
-
-  static getDerivedStateFromProps(props, state) {
-    const newDate = new Date(props.date);
-    if (newDate !== new Date(state.date)) {
-      return {
-        selectedDate: newDate,
-      };
-    }
-    return null;
-  }
-
-  calendarArray = date => {
-    const { weekStartsOn } = this.props;
-    const monthStart = getMonthStart(new Date(date));
-    const offset = monthStart.getDay() - weekStartsOn;
-    return chunk(
-      times(35, i => addDays(monthStart, i - offset)),
-      7
-    );
-  };
-
-  getPrevMonth = () => {
-    const { date } = this.state;
-    this.setState({ date: addMonths(date, -1) });
-  };
-  getNextMonth = () => {
-    const { date } = this.state;
-    this.setState({ date: addMonths(date, 1) });
-  };
-  setSelected = day => {
-    this.setState({
-      selectedDate: day,
-      date: day,
-    });
-    this.props.setSelected(day);
-  };
-
-  render() {
-    const { locale, weekStartsOn, toggleDateView } = this.props;
-    const { date, selectedDate } = this.state;
-    const calendar = this.calendarArray(date);
-    return (
-      <div className="datepicker-days">
-        <table className="table-condensed">
-          <Header
-            getPrevMonth={this.getPrevMonth}
-            getNextMonth={this.getNextMonth}
-            date={date}
-            locale={locale}
-            weekStartsOn={weekStartsOn}
-            toggleDateView={toggleDateView}
-          />
-          <tbody>
-            {calendar.map((el, idx) => (
-              <tr key={idx}>
-                {el.map(day => (
-                  <Day
-                    key={day}
-                    day={day}
-                    setSelected={this.setSelected}
-                    classNamesArray={{
-                      weekend: isWeekend(day),
-                      old: day.getMonth() !== date.getMonth(),
-                      active: isEqualDate(day, selectedDate),
-                      today: isEqualDate(day, new Date()),
-                    }}
-                  />
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-}
-
-MonthView.propTypes = {
-  date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  setSelected: PropTypes.func,
-  toggleDateView: PropTypes.func,
-  locale: PropTypes.string,
-  weekStartsOn: PropTypes.number,
-};
-
-MonthView.defaultProps = {
-  setSelected: null,
-  toggleDateView: null,
-  date: new Date(),
-  locale: 'en-US',
-  weekStartsOn: 1,
-};
-export default MonthView;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/MonthView.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/MonthView.test.js
deleted file mode 100644
index 23703b6dddb..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/MonthView.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import MonthView from './MonthView';
-
-test('MonthView is working properly', () => {
-  const component = shallow(<MonthView date="1/21/2019 , 2:22:31 PM" />);
-
-  expect(component.render()).toMatchSnapshot();
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/TodayButton.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/TodayButton.js
deleted file mode 100644
index 26344d235bd..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/TodayButton.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { translate as __ } from '../../../../common/I18n';
-
-const TodayButton = ({ setSelected }) => (
-  <table className="table-condensed">
-    <tbody>
-      <tr>
-        <td>
-          <button
-            type="button"
-            className="today-button"
-            onClick={() => {
-              if (setSelected) setSelected(new Date());
-            }}
-          >
-            <span className="today-button-">{__('Today')}</span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-);
-
-TodayButton.propTypes = {
-  setSelected: PropTypes.func,
-};
-
-TodayButton.defaultProps = {
-  setSelected: null,
-};
-export default TodayButton;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/TodayButton.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/TodayButton.test.js
deleted file mode 100644
index 0d7a4358a93..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/TodayButton.test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import TodayButton from './TodayButton';
-
-const mockedDate = new Date('2/21/2019 , 3:22:31 PM');
-
-global.Date = jest.fn(() => mockedDate);
-global.Date.now = jest.fn(() => mockedDate);
-
-test('TodayButton is working properly', () => {
-  const component = shallow(<TodayButton />);
-
-  expect(component.render()).toMatchSnapshot();
-});
-test('TodayButton Click is setting the date', () => {
-  const setSelected = jest.fn();
-  const component = shallow(<TodayButton setSelected={setSelected} />);
-  const date = new Date();
-  component.find('.today-button').simulate('click');
-  expect(setSelected).toBeCalledWith(date);
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/YearView.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/YearView.js
deleted file mode 100644
index efb108c7e5a..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/YearView.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { times } from 'lodash';
-import classNames from 'classnames';
-import { addMonths, addYears } from './helpers';
-import { noop } from '../../../../common/helpers';
-import { MONTH, DAY } from './DateConstants';
-
-class YearView extends React.Component {
-  state = {
-    date: new Date(this.props.date),
-    selectedDate: new Date(this.props.date),
-  };
-  getMonthArray = () => {
-    const date = new Date('1/1/1');
-    return times(12, i =>
-      Intl.DateTimeFormat(this.props.locale, { month: 'short' }).format(
-        addMonths(date, i)
-      )
-    );
-  };
-  getPrevYear = () => {
-    const { date } = this.state;
-    this.setState({ date: addYears(date, -1) });
-  };
-  getNextYear = () => {
-    const { date } = this.state;
-    this.setState({ date: addYears(date, 1) });
-  };
-  setSelectedMonth = month => {
-    const { date } = this.state;
-    date.setMonth(month);
-    this.props.setSelected(date);
-    this.props.toggleDateView(MONTH);
-  };
-
-  render() {
-    const { date, selectedDate } = this.state;
-    const [currMonth, currYear] = [date.getMonth(), date.getFullYear()];
-    const selectedYear = selectedDate.getFullYear();
-    const monthArray = this.getMonthArray();
-    return (
-      <div className="datepicker-months">
-        <table className="table-condensed">
-          <thead>
-            <tr>
-              <th className="prev" onClick={this.getPrevYear}>
-                <span className="glyphicon glyphicon-chevron-left" />
-              </th>
-              <th
-                className="picker-switch"
-                onClick={() => this.props.toggleDateView(DAY)}
-                colSpan="5"
-              >
-                {currYear}
-              </th>
-              <th className="next" onClick={this.getNextYear}>
-                <span className="glyphicon glyphicon-chevron-right" />
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td colSpan="7">
-                {monthArray.map((month, idx) => (
-                  <span
-                    onClick={() => this.setSelectedMonth(idx)}
-                    className={classNames('month', {
-                      active: idx === currMonth && selectedYear === currYear,
-                    })}
-                    key={idx}
-                  >
-                    {month}
-                  </span>
-                ))}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-}
-
-YearView.propTypes = {
-  date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  setSelected: PropTypes.func,
-  toggleDateView: PropTypes.func,
-  locale: PropTypes.string,
-};
-
-YearView.defaultProps = {
-  setSelected: noop,
-  toggleDateView: noop,
-  date: new Date(),
-  locale: 'en-US',
-};
-export default YearView;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/YearView.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/YearView.test.js
deleted file mode 100644
index 92382a3f846..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/YearView.test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import YearView from './YearView';
-
-test('YearView is working properly', () => {
-  const date = new Date('2/21/2019 , 2:22:31 PM');
-  const component = shallow(<YearView date={date} />);
-
-  expect(component.render()).toMatchSnapshot();
-});
-
-test('Edit month YearView', () => {
-  const date = new Date('2/21/2019 , 2:22:31 PM');
-  const setSelected = jest.fn();
-  const component = shallow(<YearView date={date} setSelected={setSelected} />);
-  expect(component.render()).toMatchSnapshot();
-  component
-    .find('.month')
-    .first()
-    .simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('1/21/2019 , 2:22:31 PM'));
-});
-
-test('Edit year and month YearView', () => {
-  const date = new Date('2/21/2019 , 2:22:31 PM');
-  const setSelected = jest.fn();
-  const component = shallow(<YearView date={date} setSelected={setSelected} />);
-  expect(component.render()).toMatchSnapshot();
-  component
-    .find('.next')
-    .first()
-    .simulate('click');
-  component
-    .find('.month')
-    .first()
-    .simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('1/21/2020 , 2:22:31 PM'));
-  component
-    .find('.prev')
-    .first()
-    .simulate('click');
-  component
-    .find('.month')
-    .first()
-    .simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('1/21/2019 , 2:22:31 PM'));
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DateInput.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DateInput.test.js.snap
deleted file mode 100644
index efe5de5ecc7..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DateInput.test.js.snap
+++ /dev/null
@@ -1,550 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DateInput is working properly 1`] = `
-<div
-  class="datepicker"
->
-  <div
-    class="datepicker-days"
-  >
-    <table
-      class="table-condensed"
-    >
-      <thead>
-        <tr>
-          <th
-            class="prev"
-          >
-            <span
-              class="pf-v5-c-icon"
-            >
-              <span
-                class="pf-v5-c-icon__content"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </th>
-          <th
-            class="picker-switch"
-            colspan="5"
-          >
-            January 2019
-          </th>
-          <th
-            class="next"
-          >
-            <span
-              class="pf-v5-c-icon"
-            >
-              <span
-                class="pf-v5-c-icon__content"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </th>
-        </tr>
-        <tr>
-          <th
-            class="dow"
-          >
-            Mo
-          </th>
-          <th
-            class="dow"
-          >
-            Tu
-          </th>
-          <th
-            class="dow"
-          >
-            We
-          </th>
-          <th
-            class="dow"
-          >
-            Th
-          </th>
-          <th
-            class="dow"
-          >
-            Fr
-          </th>
-          <th
-            class="dow"
-          >
-            Sa
-          </th>
-          <th
-            class="dow"
-          >
-            Su
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td
-            class="day old"
-            data-day="31"
-          >
-            31
-          </td>
-          <td
-            class="day"
-            data-day="1"
-          >
-            1
-          </td>
-          <td
-            class="day"
-            data-day="2"
-          >
-            2
-          </td>
-          <td
-            class="day"
-            data-day="3"
-          >
-            3
-          </td>
-          <td
-            class="day weekend"
-            data-day="4"
-          >
-            4
-          </td>
-          <td
-            class="day weekend"
-            data-day="5"
-          >
-            5
-          </td>
-          <td
-            class="day"
-            data-day="6"
-          >
-            6
-          </td>
-        </tr>
-        <tr>
-          <td
-            class="day"
-            data-day="7"
-          >
-            7
-          </td>
-          <td
-            class="day"
-            data-day="8"
-          >
-            8
-          </td>
-          <td
-            class="day"
-            data-day="9"
-          >
-            9
-          </td>
-          <td
-            class="day"
-            data-day="10"
-          >
-            10
-          </td>
-          <td
-            class="day weekend"
-            data-day="11"
-          >
-            11
-          </td>
-          <td
-            class="day weekend"
-            data-day="12"
-          >
-            12
-          </td>
-          <td
-            class="day"
-            data-day="13"
-          >
-            13
-          </td>
-        </tr>
-        <tr>
-          <td
-            class="day"
-            data-day="14"
-          >
-            14
-          </td>
-          <td
-            class="day"
-            data-day="15"
-          >
-            15
-          </td>
-          <td
-            class="day"
-            data-day="16"
-          >
-            16
-          </td>
-          <td
-            class="day"
-            data-day="17"
-          >
-            17
-          </td>
-          <td
-            class="day weekend"
-            data-day="18"
-          >
-            18
-          </td>
-          <td
-            class="day weekend"
-            data-day="19"
-          >
-            19
-          </td>
-          <td
-            class="day"
-            data-day="20"
-          >
-            20
-          </td>
-        </tr>
-        <tr>
-          <td
-            class="day active"
-            data-day="21"
-          >
-            21
-          </td>
-          <td
-            class="day"
-            data-day="22"
-          >
-            22
-          </td>
-          <td
-            class="day"
-            data-day="23"
-          >
-            23
-          </td>
-          <td
-            class="day"
-            data-day="24"
-          >
-            24
-          </td>
-          <td
-            class="day weekend"
-            data-day="25"
-          >
-            25
-          </td>
-          <td
-            class="day weekend"
-            data-day="26"
-          >
-            26
-          </td>
-          <td
-            class="day"
-            data-day="27"
-          >
-            27
-          </td>
-        </tr>
-        <tr>
-          <td
-            class="day"
-            data-day="28"
-          >
-            28
-          </td>
-          <td
-            class="day"
-            data-day="29"
-          >
-            29
-          </td>
-          <td
-            class="day"
-            data-day="30"
-          >
-            30
-          </td>
-          <td
-            class="day"
-            data-day="31"
-          >
-            31
-          </td>
-          <td
-            class="day weekend old"
-            data-day="1"
-          >
-            1
-          </td>
-          <td
-            class="day weekend old"
-            data-day="2"
-          >
-            2
-          </td>
-          <td
-            class="day old"
-            data-day="3"
-          >
-            3
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
-
-exports[`DateInput toggles view to decades 1`] = `
-<div
-  class="datepicker"
->
-  <div
-    class="datepicker-years"
-  >
-    <table
-      class="table-condensed"
-    >
-      <thead>
-        <tr>
-          <th
-            class="prev"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-left"
-            />
-          </th>
-          <th
-            class="picker-switch"
-            colspan="5"
-            data-action="pickerSwitch"
-          >
-            2010-2021
-          </th>
-          <th
-            class="next"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-right"
-            />
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td
-            colspan="7"
-          >
-            <span
-              class="year "
-            >
-              2010
-            </span>
-            <span
-              class="year "
-            >
-              2011
-            </span>
-            <span
-              class="year "
-            >
-              2012
-            </span>
-            <span
-              class="year "
-            >
-              2013
-            </span>
-            <span
-              class="year "
-            >
-              2014
-            </span>
-            <span
-              class="year "
-            >
-              2015
-            </span>
-            <span
-              class="year "
-            >
-              2016
-            </span>
-            <span
-              class="year "
-            >
-              2017
-            </span>
-            <span
-              class="year "
-            >
-              2018
-            </span>
-            <span
-              class="year active"
-            >
-              2019
-            </span>
-            <span
-              class="year "
-            >
-              2020
-            </span>
-            <span
-              class="year "
-            >
-              2021
-            </span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
-
-exports[`DateInput toggles view to years 1`] = `
-<div
-  class="datepicker"
->
-  <div
-    class="datepicker-months"
-  >
-    <table
-      class="table-condensed"
-    >
-      <thead>
-        <tr>
-          <th
-            class="prev"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-left"
-            />
-          </th>
-          <th
-            class="picker-switch"
-            colspan="5"
-          >
-            2019
-          </th>
-          <th
-            class="next"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-right"
-            />
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td
-            colspan="7"
-          >
-            <span
-              class="month active"
-            >
-              Jan
-            </span>
-            <span
-              class="month"
-            >
-              Feb
-            </span>
-            <span
-              class="month"
-            >
-              Mar
-            </span>
-            <span
-              class="month"
-            >
-              Apr
-            </span>
-            <span
-              class="month"
-            >
-              May
-            </span>
-            <span
-              class="month"
-            >
-              Jun
-            </span>
-            <span
-              class="month"
-            >
-              Jul
-            </span>
-            <span
-              class="month"
-            >
-              Aug
-            </span>
-            <span
-              class="month"
-            >
-              Sep
-            </span>
-            <span
-              class="month"
-            >
-              Oct
-            </span>
-            <span
-              class="month"
-            >
-              Nov
-            </span>
-            <span
-              class="month"
-            >
-              Dec
-            </span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/Day.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/Day.test.js.snap
deleted file mode 100644
index ba9356b1999..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/Day.test.js.snap
+++ /dev/null
@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Day is working properly 1`] = `
-<td
-  class="day weekend"
-  data-day="4"
->
-  4
-</td>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DecadeView.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DecadeView.test.js.snap
deleted file mode 100644
index 217de99f7b2..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DecadeView.test.js.snap
+++ /dev/null
@@ -1,313 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DecadeView is working properly 1`] = `
-<div
-  class="datepicker-years"
->
-  <table
-    class="table-condensed"
-  >
-    <thead>
-      <tr>
-        <th
-          class="prev"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-left"
-          />
-        </th>
-        <th
-          class="picker-switch"
-          colspan="5"
-          data-action="pickerSwitch"
-        >
-          2020-2031
-        </th>
-        <th
-          class="next"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-right"
-          />
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td
-          colspan="7"
-        >
-          <span
-            class="year active"
-          >
-            2020
-          </span>
-          <span
-            class="year "
-          >
-            2021
-          </span>
-          <span
-            class="year "
-          >
-            2022
-          </span>
-          <span
-            class="year "
-          >
-            2023
-          </span>
-          <span
-            class="year "
-          >
-            2024
-          </span>
-          <span
-            class="year "
-          >
-            2025
-          </span>
-          <span
-            class="year "
-          >
-            2026
-          </span>
-          <span
-            class="year "
-          >
-            2027
-          </span>
-          <span
-            class="year "
-          >
-            2028
-          </span>
-          <span
-            class="year "
-          >
-            2029
-          </span>
-          <span
-            class="year "
-          >
-            2030
-          </span>
-          <span
-            class="year "
-          >
-            2031
-          </span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`Edit decade DecadeView 1`] = `
-<div
-  class="datepicker-years"
->
-  <table
-    class="table-condensed"
-  >
-    <thead>
-      <tr>
-        <th
-          class="prev"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-left"
-          />
-        </th>
-        <th
-          class="picker-switch"
-          colspan="5"
-          data-action="pickerSwitch"
-        >
-          2010-2021
-        </th>
-        <th
-          class="next"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-right"
-          />
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td
-          colspan="7"
-        >
-          <span
-            class="year "
-          >
-            2010
-          </span>
-          <span
-            class="year "
-          >
-            2011
-          </span>
-          <span
-            class="year "
-          >
-            2012
-          </span>
-          <span
-            class="year "
-          >
-            2013
-          </span>
-          <span
-            class="year "
-          >
-            2014
-          </span>
-          <span
-            class="year "
-          >
-            2015
-          </span>
-          <span
-            class="year "
-          >
-            2016
-          </span>
-          <span
-            class="year "
-          >
-            2017
-          </span>
-          <span
-            class="year "
-          >
-            2018
-          </span>
-          <span
-            class="year active"
-          >
-            2019
-          </span>
-          <span
-            class="year "
-          >
-            2020
-          </span>
-          <span
-            class="year "
-          >
-            2021
-          </span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`Edit year DecadeView 1`] = `
-<div
-  class="datepicker-years"
->
-  <table
-    class="table-condensed"
-  >
-    <thead>
-      <tr>
-        <th
-          class="prev"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-left"
-          />
-        </th>
-        <th
-          class="picker-switch"
-          colspan="5"
-          data-action="pickerSwitch"
-        >
-          2010-2021
-        </th>
-        <th
-          class="next"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-right"
-          />
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td
-          colspan="7"
-        >
-          <span
-            class="year "
-          >
-            2010
-          </span>
-          <span
-            class="year "
-          >
-            2011
-          </span>
-          <span
-            class="year "
-          >
-            2012
-          </span>
-          <span
-            class="year "
-          >
-            2013
-          </span>
-          <span
-            class="year "
-          >
-            2014
-          </span>
-          <span
-            class="year "
-          >
-            2015
-          </span>
-          <span
-            class="year "
-          >
-            2016
-          </span>
-          <span
-            class="year "
-          >
-            2017
-          </span>
-          <span
-            class="year "
-          >
-            2018
-          </span>
-          <span
-            class="year active"
-          >
-            2019
-          </span>
-          <span
-            class="year "
-          >
-            2020
-          </span>
-          <span
-            class="year "
-          >
-            2021
-          </span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DecadeViewHeader.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DecadeViewHeader.test.js.snap
deleted file mode 100644
index 5d5f6f6c704..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DecadeViewHeader.test.js.snap
+++ /dev/null
@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DecadeViewHeader is working properly 1`] = `
-<thead>
-  <tr>
-    <th
-      class="prev"
-    >
-      <span
-        class="glyphicon glyphicon-chevron-left"
-      />
-    </th>
-    <th
-      class="picker-switch"
-      colspan="5"
-      data-action="pickerSwitch"
-    >
-      2010-2021
-    </th>
-    <th
-      class="next"
-    >
-      <span
-        class="glyphicon glyphicon-chevron-right"
-      />
-    </th>
-  </tr>
-</thead>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DecadeViewTable.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DecadeViewTable.test.js.snap
deleted file mode 100644
index eb05b08635c..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/DecadeViewTable.test.js.snap
+++ /dev/null
@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DecadeViewTable is working properly 1`] = `
-<tbody>
-  <tr>
-    <td
-      colspan="7"
-    >
-      <span
-        class="year "
-      >
-        2010
-      </span>
-      <span
-        class="year "
-      >
-        2011
-      </span>
-      <span
-        class="year "
-      >
-        2012
-      </span>
-      <span
-        class="year "
-      >
-        2013
-      </span>
-      <span
-        class="year "
-      >
-        2014
-      </span>
-      <span
-        class="year "
-      >
-        2015
-      </span>
-      <span
-        class="year "
-      >
-        2016
-      </span>
-      <span
-        class="year "
-      >
-        2017
-      </span>
-      <span
-        class="year "
-      >
-        2018
-      </span>
-      <span
-        class="year active"
-      >
-        2019
-      </span>
-      <span
-        class="year "
-      >
-        2020
-      </span>
-      <span
-        class="year "
-      >
-        2021
-      </span>
-    </td>
-  </tr>
-</tbody>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/Header.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/Header.test.js.snap
deleted file mode 100644
index 5e96c0d0412..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/Header.test.js.snap
+++ /dev/null
@@ -1,201 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Header is working properly 1`] = `
-<thead>
-  <tr>
-    <th
-      class="prev"
-    >
-      <span
-        class="pf-v5-c-icon"
-      >
-        <span
-          class="pf-v5-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            />
-          </svg>
-        </span>
-      </span>
-    </th>
-    <th
-      class="picker-switch"
-      colspan="5"
-    >
-      January 2019
-    </th>
-    <th
-      class="next"
-    >
-      <span
-        class="pf-v5-c-icon"
-      >
-        <span
-          class="pf-v5-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </span>
-    </th>
-  </tr>
-  <tr>
-    <th
-      class="dow"
-    >
-      Mo
-    </th>
-    <th
-      class="dow"
-    >
-      Tu
-    </th>
-    <th
-      class="dow"
-    >
-      We
-    </th>
-    <th
-      class="dow"
-    >
-      Th
-    </th>
-    <th
-      class="dow"
-    >
-      Fr
-    </th>
-    <th
-      class="dow"
-    >
-      Sa
-    </th>
-    <th
-      class="dow"
-    >
-      Su
-    </th>
-  </tr>
-</thead>
-`;
-
-exports[`Header is working properly with different week start 1`] = `
-<thead>
-  <tr>
-    <th
-      class="prev"
-    >
-      <span
-        class="pf-v5-c-icon"
-      >
-        <span
-          class="pf-v5-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            />
-          </svg>
-        </span>
-      </span>
-    </th>
-    <th
-      class="picker-switch"
-      colspan="5"
-    >
-      January 2019
-    </th>
-    <th
-      class="next"
-    >
-      <span
-        class="pf-v5-c-icon"
-      >
-        <span
-          class="pf-v5-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </span>
-    </th>
-  </tr>
-  <tr>
-    <th
-      class="dow"
-    >
-      Fr
-    </th>
-    <th
-      class="dow"
-    >
-      Sa
-    </th>
-    <th
-      class="dow"
-    >
-      Su
-    </th>
-    <th
-      class="dow"
-    >
-      Mo
-    </th>
-    <th
-      class="dow"
-    >
-      Tu
-    </th>
-    <th
-      class="dow"
-    >
-      We
-    </th>
-    <th
-      class="dow"
-    >
-      Th
-    </th>
-  </tr>
-</thead>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/MonthView.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/MonthView.test.js.snap
deleted file mode 100644
index a1f6dd20c9e..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/MonthView.test.js.snap
+++ /dev/null
@@ -1,331 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MonthView is working properly 1`] = `
-<div
-  class="datepicker-days"
->
-  <table
-    class="table-condensed"
-  >
-    <thead>
-      <tr>
-        <th
-          class="prev"
-        >
-          <span
-            class="pf-v5-c-icon"
-          >
-            <span
-              class="pf-v5-c-icon__content"
-            >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                />
-              </svg>
-            </span>
-          </span>
-        </th>
-        <th
-          class="picker-switch"
-          colspan="5"
-        >
-          January 2019
-        </th>
-        <th
-          class="next"
-        >
-          <span
-            class="pf-v5-c-icon"
-          >
-            <span
-              class="pf-v5-c-icon__content"
-            >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-            </span>
-          </span>
-        </th>
-      </tr>
-      <tr>
-        <th
-          class="dow"
-        >
-          Mo
-        </th>
-        <th
-          class="dow"
-        >
-          Tu
-        </th>
-        <th
-          class="dow"
-        >
-          We
-        </th>
-        <th
-          class="dow"
-        >
-          Th
-        </th>
-        <th
-          class="dow"
-        >
-          Fr
-        </th>
-        <th
-          class="dow"
-        >
-          Sa
-        </th>
-        <th
-          class="dow"
-        >
-          Su
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td
-          class="day old"
-          data-day="31"
-        >
-          31
-        </td>
-        <td
-          class="day"
-          data-day="1"
-        >
-          1
-        </td>
-        <td
-          class="day"
-          data-day="2"
-        >
-          2
-        </td>
-        <td
-          class="day"
-          data-day="3"
-        >
-          3
-        </td>
-        <td
-          class="day weekend"
-          data-day="4"
-        >
-          4
-        </td>
-        <td
-          class="day weekend"
-          data-day="5"
-        >
-          5
-        </td>
-        <td
-          class="day"
-          data-day="6"
-        >
-          6
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="day"
-          data-day="7"
-        >
-          7
-        </td>
-        <td
-          class="day"
-          data-day="8"
-        >
-          8
-        </td>
-        <td
-          class="day"
-          data-day="9"
-        >
-          9
-        </td>
-        <td
-          class="day"
-          data-day="10"
-        >
-          10
-        </td>
-        <td
-          class="day weekend"
-          data-day="11"
-        >
-          11
-        </td>
-        <td
-          class="day weekend"
-          data-day="12"
-        >
-          12
-        </td>
-        <td
-          class="day"
-          data-day="13"
-        >
-          13
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="day"
-          data-day="14"
-        >
-          14
-        </td>
-        <td
-          class="day"
-          data-day="15"
-        >
-          15
-        </td>
-        <td
-          class="day"
-          data-day="16"
-        >
-          16
-        </td>
-        <td
-          class="day"
-          data-day="17"
-        >
-          17
-        </td>
-        <td
-          class="day weekend"
-          data-day="18"
-        >
-          18
-        </td>
-        <td
-          class="day weekend"
-          data-day="19"
-        >
-          19
-        </td>
-        <td
-          class="day"
-          data-day="20"
-        >
-          20
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="day active"
-          data-day="21"
-        >
-          21
-        </td>
-        <td
-          class="day"
-          data-day="22"
-        >
-          22
-        </td>
-        <td
-          class="day"
-          data-day="23"
-        >
-          23
-        </td>
-        <td
-          class="day"
-          data-day="24"
-        >
-          24
-        </td>
-        <td
-          class="day weekend"
-          data-day="25"
-        >
-          25
-        </td>
-        <td
-          class="day weekend"
-          data-day="26"
-        >
-          26
-        </td>
-        <td
-          class="day"
-          data-day="27"
-        >
-          27
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="day"
-          data-day="28"
-        >
-          28
-        </td>
-        <td
-          class="day"
-          data-day="29"
-        >
-          29
-        </td>
-        <td
-          class="day"
-          data-day="30"
-        >
-          30
-        </td>
-        <td
-          class="day"
-          data-day="31"
-        >
-          31
-        </td>
-        <td
-          class="day weekend old"
-          data-day="1"
-        >
-          1
-        </td>
-        <td
-          class="day weekend old"
-          data-day="2"
-        >
-          2
-        </td>
-        <td
-          class="day old"
-          data-day="3"
-        >
-          3
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/TodayButton.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/TodayButton.test.js.snap
deleted file mode 100644
index cf8b4fc8685..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/TodayButton.test.js.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TodayButton is working properly 1`] = `
-<table
-  class="table-condensed"
->
-  <tbody>
-    <tr>
-      <td>
-        <button
-          class="today-button"
-          type="button"
-        >
-          <span
-            class="today-button-"
-          >
-            Today
-          </span>
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/YearView.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/YearView.test.js.snap
deleted file mode 100644
index d739c27f103..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/__snapshots__/YearView.test.js.snap
+++ /dev/null
@@ -1,310 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Edit month YearView 1`] = `
-<div
-  class="datepicker-months"
->
-  <table
-    class="table-condensed"
-  >
-    <thead>
-      <tr>
-        <th
-          class="prev"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-left"
-          />
-        </th>
-        <th
-          class="picker-switch"
-          colspan="5"
-        >
-          2019
-        </th>
-        <th
-          class="next"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-right"
-          />
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td
-          colspan="7"
-        >
-          <span
-            class="month"
-          >
-            Jan
-          </span>
-          <span
-            class="month active"
-          >
-            Feb
-          </span>
-          <span
-            class="month"
-          >
-            Mar
-          </span>
-          <span
-            class="month"
-          >
-            Apr
-          </span>
-          <span
-            class="month"
-          >
-            May
-          </span>
-          <span
-            class="month"
-          >
-            Jun
-          </span>
-          <span
-            class="month"
-          >
-            Jul
-          </span>
-          <span
-            class="month"
-          >
-            Aug
-          </span>
-          <span
-            class="month"
-          >
-            Sep
-          </span>
-          <span
-            class="month"
-          >
-            Oct
-          </span>
-          <span
-            class="month"
-          >
-            Nov
-          </span>
-          <span
-            class="month"
-          >
-            Dec
-          </span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`Edit year and month YearView 1`] = `
-<div
-  class="datepicker-months"
->
-  <table
-    class="table-condensed"
-  >
-    <thead>
-      <tr>
-        <th
-          class="prev"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-left"
-          />
-        </th>
-        <th
-          class="picker-switch"
-          colspan="5"
-        >
-          2019
-        </th>
-        <th
-          class="next"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-right"
-          />
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td
-          colspan="7"
-        >
-          <span
-            class="month"
-          >
-            Jan
-          </span>
-          <span
-            class="month active"
-          >
-            Feb
-          </span>
-          <span
-            class="month"
-          >
-            Mar
-          </span>
-          <span
-            class="month"
-          >
-            Apr
-          </span>
-          <span
-            class="month"
-          >
-            May
-          </span>
-          <span
-            class="month"
-          >
-            Jun
-          </span>
-          <span
-            class="month"
-          >
-            Jul
-          </span>
-          <span
-            class="month"
-          >
-            Aug
-          </span>
-          <span
-            class="month"
-          >
-            Sep
-          </span>
-          <span
-            class="month"
-          >
-            Oct
-          </span>
-          <span
-            class="month"
-          >
-            Nov
-          </span>
-          <span
-            class="month"
-          >
-            Dec
-          </span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`YearView is working properly 1`] = `
-<div
-  class="datepicker-months"
->
-  <table
-    class="table-condensed"
-  >
-    <thead>
-      <tr>
-        <th
-          class="prev"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-left"
-          />
-        </th>
-        <th
-          class="picker-switch"
-          colspan="5"
-        >
-          2019
-        </th>
-        <th
-          class="next"
-        >
-          <span
-            class="glyphicon glyphicon-chevron-right"
-          />
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td
-          colspan="7"
-        >
-          <span
-            class="month"
-          >
-            Jan
-          </span>
-          <span
-            class="month active"
-          >
-            Feb
-          </span>
-          <span
-            class="month"
-          >
-            Mar
-          </span>
-          <span
-            class="month"
-          >
-            Apr
-          </span>
-          <span
-            class="month"
-          >
-            May
-          </span>
-          <span
-            class="month"
-          >
-            Jun
-          </span>
-          <span
-            class="month"
-          >
-            Jul
-          </span>
-          <span
-            class="month"
-          >
-            Aug
-          </span>
-          <span
-            class="month"
-          >
-            Sep
-          </span>
-          <span
-            class="month"
-          >
-            Oct
-          </span>
-          <span
-            class="month"
-          >
-            Nov
-          </span>
-          <span
-            class="month"
-          >
-            Dec
-          </span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/helpers.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/helpers.js
deleted file mode 100644
index c7a7275cd13..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/helpers.js
+++ /dev/null
@@ -1,42 +0,0 @@
-export const addDays = (date, days) => {
-  const result = new Date(date);
-  result.setDate(result.getDate() + days);
-  return result;
-};
-
-export const addMonths = (date, months) => {
-  const result = new Date(date);
-  result.setMonth(result.getMonth() + months);
-  return result;
-};
-
-export const addYears = (date, years) => {
-  const result = new Date(date);
-  result.setYear(result.getFullYear() + years);
-  return result;
-};
-
-export const isEqualDate = (date1, date2) =>
-  date1.getYear() === date2.getYear() &&
-  date1.getMonth() === date2.getMonth() &&
-  date1.getDate() === date2.getDate();
-
-export const isWeekend = date => date.getDay() === 6 || date.getDay() === 5;
-
-export const getMonthStart = date => {
-  date.setDate(1);
-  return date;
-};
-
-export const getWeekStart = date => addDays(date, (7 - date.getDay()) % 7);
-
-export const helpers = {
-  addDays,
-  addMonths,
-  isEqualDate,
-  isWeekend,
-  getMonthStart,
-  getWeekStart,
-};
-
-export default helpers;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/helpers.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/helpers.test.js
deleted file mode 100644
index 8ddf9ebec78..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateComponents/helpers.test.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import {
-  addDays,
-  addMonths,
-  isEqualDate,
-  isWeekend,
-  getMonthStart,
-} from './helpers';
-
-describe('addDays ', () => {
-  const date = new Date('2/21/2019 , 2:22:31 PM');
-  test('same month', () => {
-    const newDate = addDays(date, 2);
-    expect(newDate).toEqual(new Date('2/23/2019 , 2:22:31 PM'));
-  });
-  test('different month', () => {
-    const newDate = addDays(date, 20);
-    expect(newDate).toEqual(new Date('3/13/2019 , 2:22:31 PM'));
-  });
-  test('negative amount', () => {
-    const newDate = addDays(date, -2);
-    expect(newDate).toEqual(new Date('2/19/2019 , 2:22:31 PM'));
-  });
-});
-
-describe('addMonths ', () => {
-  const date = new Date('2/21/2019, 2:22:31 PM');
-  test('same year', () => {
-    const newDate = addMonths(date, 2);
-    expect(newDate).toEqual(new Date('4/21/2019, 2:22:31 PM'));
-  });
-  test('different year', () => {
-    const newDate = addMonths(date, 13);
-    expect(newDate).toEqual(new Date('3/21/2020, 2:22:31 PM'));
-  });
-  test('negative amount', () => {
-    const newDate = addMonths(date, -1);
-    expect(newDate).toEqual(new Date('1/21/2019, 2:22:31 PM'));
-  });
-});
-
-describe('isEqualDate ', () => {
-  const date = new Date('2/21/2019 , 2:22:31 PM');
-  test('equal', () => {
-    const date2 = new Date('2/21/2019 , 6:22:31 PM');
-    expect(isEqualDate(date, date2)).toBeTruthy();
-  });
-  test('not equal', () => {
-    const date2 = new Date('2/22/2019 , 6:22:31 PM');
-    expect(isEqualDate(date, date2)).toBeFalsy();
-  });
-});
-
-describe('isWeekend ', () => {
-  test('not weekend', () => {
-    const date = new Date('2/21/2019 , 6:22:31 PM');
-    expect(isWeekend(date)).toBeFalsy();
-  });
-  test('is weekend', () => {
-    const date = new Date('2/23/2019 , 6:22:31 PM');
-    expect(isWeekend(date)).toBeTruthy();
-  });
-});
-
-describe('getMonthStart ', () => {
-  test('already strart of the month', () => {
-    const date = new Date('2/1/2019 , 6:22:31 PM');
-    expect(getMonthStart(date)).toEqual(new Date('2/1/2019 , 6:22:31 PM'));
-  });
-  test('muidlle of the month', () => {
-    const date = new Date('2/23/2019 , 6:22:31 PM');
-    expect(getMonthStart(date)).toEqual(new Date('2/1/2019 , 6:22:31 PM'));
-  });
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DatePicker.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DatePicker.js
index 33ad8a23fd3..8351c83b469 100644
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DatePicker.js
+++ b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DatePicker.js
@@ -1,92 +1,58 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { FormControl, InputGroup } from 'patternfly-react';
-import { Icon, Popover } from '@patternfly/react-core';
-import { CalendarAltIcon, TimesIcon } from '@patternfly/react-icons';
-import DateInput from './DateComponents/DateInput';
-import TodayButton from './DateComponents/TodayButton';
-import { formatDate } from '../../../common/helpers';
+import { DatePicker as PfDatePicker, Button } from '@patternfly/react-core';
+import { translate as __ } from '../../../common/I18n';
+import { formatDate } from './dateTimeHelpers';
 import './date-time-picker.scss';
 
-class DatePicker extends React.Component {
-  get hasDefaultValue() {
-    const { value } = this.props;
-    return !!Date.parse(value);
-  }
-
-  get initialDate() {
-    const { value } = this.props;
-    return this.hasDefaultValue ? new Date(value) : new Date();
-  }
-
-  state = {
-    value: this.initialDate,
-    hiddenValue: !this.hasDefaultValue,
-  };
-
-  setSelected = date => {
-    if (Date.parse(date)) {
-      const newDate = new Date(date);
-      this.setState({ value: newDate });
-    }
-  };
-
-  render() {
-    const { locale, weekStartsOn, name, id, placement, required } = this.props;
-    const { value, hiddenValue } = this.state;
-    const popover = (
-      <div className="row bootstrap-datetimepicker-widget" id={id}>
-        <DateInput
-          date={value}
-          setSelected={this.setSelected}
-          locale={locale}
-          weekStartsOn={weekStartsOn}
-          className="col-xs-12"
-        />
-        <li className="picker-switch accordion-toggle">
-          <TodayButton setSelected={this.setSelected} />
-        </li>
-      </div>
-    );
-    return (
-      <div>
-        <InputGroup className="input-group date-time-picker-pf">
-          <FormControl
-            aria-label="date-time-picker-input"
-            type="text"
-            className="date-input"
-            value={hiddenValue && !required ? '' : formatDate(value)}
-            name={name}
-            onChange={e => this.setSelected(e.target.value)}
-          />
-          <Popover
-            position={placement}
-            bodyContent={popover}
-            onShown={() => this.setState({ hiddenValue: false })}
-          >
-            <InputGroup.Addon className="date-picker-pf">
-              <Icon>
-                <CalendarAltIcon />
-              </Icon>
-            </InputGroup.Addon>
-          </Popover>
-          {!required && (
-            <InputGroup.Addon
-              className="clear-button"
-              onClick={() =>
-                this.setState({ hiddenValue: true, value: new Date() })
-              }
-            >
-              <Icon>
-                <TimesIcon />
-              </Icon>
-            </InputGroup.Addon>
-          )}
-        </InputGroup>
-      </div>
-    );
-  }
-}
+const DatePicker = ({
+  value: initialValue,
+  locale,
+  weekStartsOn,
+  name,
+  id,
+  placement,
+  required,
+}) => {
+  const [value, setValue] = useState(formatDate(initialValue));
+  return (
+    <div className="date-picker-pf-wrapper">
+      <PfDatePicker
+        value={value}
+        onChange={(_event, newValue) => setValue(newValue)}
+        locale={locale}
+        weekStart={weekStartsOn}
+        inputProps={{ name, id }}
+        popoverProps={{
+          position: placement,
+          className: 'date-picker-popover',
+          footerContent: (
+            <div className="date-picker-input-items">
+              <Button
+                className="date-picker-input-item"
+                ouiaId="today-button"
+                onClick={() => setValue(formatDate(new Date()))}
+              >
+                {__('Today')}
+              </Button>
+              <Button
+                className="date-picker-input-item"
+                ouiaId="clear-button"
+                onClick={() => setValue('')}
+              >
+                {__('Clear')}
+              </Button>
+            </div>
+          ),
+        }}
+        requiredDateOptions={{
+          isRequired: required,
+          emptyDateText: __('Date is required'),
+        }}
+      />
+    </div>
+  );
+};
 
 DatePicker.propTypes = {
   value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DatePicker.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DatePicker.test.js
index 971498ad680..4517e02a0b7 100644
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DatePicker.test.js
+++ b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DatePicker.test.js
@@ -1,24 +1,89 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import DatePicker from './DatePicker';
 
 describe('DatePicker', () => {
-  test('renders properly', () => {
-    const component = mount(<DatePicker/>);
-    expect(component.render()).toMatchSnapshot();
+  test('renders properly', async () => {
+    const { container } = render(<DatePicker />);
+    
+    const wrapper = container.querySelector('.date-picker-pf-wrapper');
+    expect(wrapper).toBeInTheDocument();
+    const calendarButton = screen.getByLabelText('Toggle date picker');
+    expect(calendarButton).toBeInTheDocument();
+    
+    await act(async () => {
+      fireEvent.click(calendarButton);
+    });
+    const todayButton = screen.getByText('Today');
+    expect(todayButton).toBeInTheDocument();
+    const clearButton = screen.getByText('Clear');
+    expect(clearButton).toBeInTheDocument();
   });
 
   test('prefils the value from prop', () => {
-    const component = mount(<DatePicker value="2/21/2019 , 2:22:31 PM"/>);
-    expect(component.render()).toMatchSnapshot();
+    const testDate = new Date('2024-01-15');
+    const { container } = render(<DatePicker value={testDate} />);
+    const dateInput = container.querySelector('input');
+    
+    expect(dateInput).toBeInTheDocument();
+    expect(dateInput).toHaveValue('2024-01-15');
   });
 
   test('edit works', () => {
-    const component = mount(<DatePicker value="2/21/2019  " />);
-    component
-      .find('input')
-      .simulate('change', { target: { value: '2/22/2019' } });
-    expect(component.state().value).toEqual(new Date('2/22/2019'));
-    expect(component.render()).toMatchSnapshot();
+    const { container } = render(<DatePicker />);
+    
+    const dateInput = container.querySelector('input');
+  
+    fireEvent.change(dateInput, { target: { value: '2024-12-25' } });
+
+    expect(dateInput).toHaveValue('2024-12-25');
+  });
+
+  test('clear button clears the value', async () => {
+    const testDate = new Date('2024-01-15');
+    const { container } = render(<DatePicker value={testDate} />);
+    
+    const dateInput = container.querySelector('input');
+    expect(dateInput).toHaveValue('2024-01-15');
+
+    const calendarButton = screen.getByLabelText('Toggle date picker');
+    await act(async () => {
+      fireEvent.click(calendarButton);
+    });
+    const clearButton = await screen.findByText('Clear');
+    fireEvent.click(clearButton);
+    expect(dateInput).toHaveValue('');
+  });
+
+  test('passes props to PatternFly DatePicker', () => {
+    const { container } = render(
+      <DatePicker
+        name="test-date"
+        id="test-date-picker"
+        locale="en-US"
+        weekStartsOn={0}
+        placement="bottom"
+        required
+      />
+    );
+  
+    const dateInput = container.querySelector('input[name="test-date"]');
+    expect(dateInput).toBeInTheDocument();
+    expect(dateInput).toHaveAttribute('name', 'test-date');
+    expect(dateInput).toHaveAttribute('id', 'test-date-picker');
+  });
+
+  test('shows error when required field is empty and blurred', () => {
+    const { container } = render(<DatePicker required />);
+    
+    const dateInput = container.querySelector('input');
+    
+    expect(screen.queryByText('Date is required')).not.toBeInTheDocument();
+    fireEvent.change(dateInput, { target: { value: '' } });
+    fireEvent.blur(dateInput);
+    expect(screen.queryByText('Date is required')).toBeInTheDocument();
+    
+    expect(dateInput).toHaveAttribute('aria-invalid', 'true');
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateTimePicker.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateTimePicker.js
index 593e63c4fab..94e2a9318dd 100644
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateTimePicker.js
+++ b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateTimePicker.js
@@ -1,124 +1,212 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { FormControl, InputGroup } from 'patternfly-react';
-import { OutlinedCalendarAltIcon, TimesIcon } from '@patternfly/react-icons';
-import { Popover, Icon } from '@patternfly/react-core';
-import DateInput from './DateComponents/DateInput';
-import TodayButton from './DateComponents/TodayButton';
-import TimeInput from './TimeComponents/TimeInput';
-import { MONTH } from './DateComponents/DateConstants';
-import { noop, formatDateTime } from '../../../common/helpers';
+import {
+  CalendarMonth,
+  InputGroup,
+  InputGroupItem,
+  TextInput,
+  Button,
+  HelperText,
+  HelperTextItem,
+  Popover,
+} from '@patternfly/react-core';
+import { OutlinedCalendarAltIcon } from '@patternfly/react-icons';
+import { formatDate, formatTime } from './dateTimeHelpers';
+import { noop } from '../../../common/helpers';
+import TimePicker from './TimePicker';
+import { translate as __ } from '../../../common/I18n';
 import './date-time-picker.scss';
 
-class DateTimePicker extends React.Component {
-  get hasDefaultValue() {
-    const { value } = this.props;
-    return !!Date.parse(value);
-  }
+const DateTimePicker = ({
+  value: initialValue,
+  locale,
+  weekStartsOn,
+  name,
+  id,
+  placement,
+  required,
+  inputProps,
+  isFutureOnly,
+  onChange, // additional prop to allow for custom onChange logic
+}) => {
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const [valueDate, setValueDate] = useState(formatDate(initialValue));
+  const [valueTime, setValueTime] = useState(formatTime(initialValue));
+  const [value, setValue] = useState(`${valueDate} ${valueTime}`);
+  const [errorText, setErrorText] = useState(null);
 
-  get initialDate() {
-    const { value } = this.props;
-    return this.hasDefaultValue ? new Date(value) : new Date();
-  }
+  const intervalRef = useRef(null);
+  const onToggleCalendar = () => {
+    setIsCalendarOpen(!isCalendarOpen);
+  };
+  const futureErrorMessage = __('Date must be in the future');
+  useEffect(() => {
+    const updateError = () => {
+      if ((!valueDate || !valueTime || !value) && required) {
+        setErrorText(__('Date and time are required'));
+      } else if (
+        isFutureOnly &&
+        new Date().setSeconds(0, 0) > new Date(value).setSeconds(0, 0)
+      ) {
+        setErrorText(futureErrorMessage);
+      } else {
+        setErrorText(null);
+        onChange(value);
+      }
+    };
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    updateError();
+    intervalRef.current = setInterval(updateError, 30000); // make sure the error is updated every 30 seconds so isFutureOnly is always up to date
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [valueDate, valueTime, value, required, isFutureOnly]);
 
-  state = {
-    value: this.initialDate,
-    typeOfDateInput: MONTH,
-    isTimeTableOpen: false,
-    hiddenValue: !this.hasDefaultValue,
+  const onSelectCalendar = (_event, newValueDate) => {
+    const newDate = formatDate(newValueDate);
+    setValueDate(newDate);
+    setIsCalendarOpen(!isCalendarOpen);
+    setValue(`${newDate} ${valueTime}`);
   };
 
-  setSelected = date => {
-    if (Date.parse(date)) {
-      const newDate = new Date(date);
-      this.setState({ value: newDate });
-      this.props.onChange(newDate);
+  const onBlur = () => {
+    const [date, time] = value
+      .replace(/\s+/g, ' ')
+      .trim()
+      .split(' ');
+    setValueDate(formatDate(date || ''));
+    setValueTime(formatTime(time || ''));
+    if (date && time) {
+      setValue(`${date} ${time}`);
+    } else {
+      setValue('');
     }
-    this.setState({
-      typeOfDateInput: MONTH,
-      isTimeTableOpen: false,
-    });
   };
-
-  clearSelected = () => {
-    this.setState({ hiddenValue: true, value: new Date() });
-    this.props.onChange(undefined);
+  const onClear = () => {
+    setValueDate('');
+    setValue('');
+  };
+  const onSelectTime = newTime => {
+    newTime = formatTime(newTime);
+    const newDate = formatDate(valueDate);
+    setValueTime(newTime);
+    setValue(`${newDate} ${newTime}`);
+  };
+  const onToday = () => {
+    const todayDate = formatDate(new Date());
+    const todayTime = formatTime(new Date());
+    setValueDate(todayDate);
+    setValueTime(todayTime);
+    setValue(`${todayDate} ${todayTime}`);
   };
+  const futureValidator = date => {
+    if (
+      isFutureOnly &&
+      date.setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)
+    ) {
+      return false;
+    }
+    return true;
+  };
+  const calendar = (
+    <CalendarMonth
+      locale={locale}
+      weekStart={weekStartsOn}
+      date={valueDate ? new Date(valueDate) : ''}
+      onChange={onSelectCalendar}
+      validators={[futureValidator]}
+    />
+  );
 
-  render() {
-    const {
-      locale,
-      weekStartsOn,
-      inputProps,
-      id,
-      placement,
-      name,
-      required,
-    } = this.props;
-    const { value, typeOfDateInput, isTimeTableOpen, hiddenValue } = this.state;
-    const popover = (
-      <div
-        className="row bootstrap-datetimepicker-widget timepicker-sbs"
-        id={id}
+  return (
+    <div className="date-time-picker-pf-wrapper">
+      <Popover
+        position={placement}
+        bodyContent={calendar}
+        showClose={false}
+        isVisible={isCalendarOpen}
+        shouldClose={() => {
+          setIsCalendarOpen(false);
+        }}
+        hasNoPadding
+        hasAutoWidth
+        className="date-picker-popover"
+        footerContent={
+          <div className="date-picker-input-items">
+            <Button
+              className="date-picker-input-item"
+              ouiaId="today-button"
+              onClick={onToday}
+            >
+              {__('Today')}
+            </Button>
+            <Button
+              className="date-picker-input-item"
+              ouiaId="clear-button"
+              onClick={onClear}
+            >
+              {__('Clear')}
+            </Button>
+          </div>
+        }
       >
-        <DateInput
-          date={value}
-          setSelected={this.setSelected}
-          locale={locale}
-          weekStartsOn={weekStartsOn}
-          className="col-md-6"
-          typeOfDateInput={typeOfDateInput}
-        />
-        <TimeInput
-          time={value}
-          setSelected={this.setSelected}
-          isTimeTableOpen={isTimeTableOpen}
-        />
-        <li className="picker-switch accordion-toggle">
-          <TodayButton setSelected={this.setSelected} />
-        </li>
-      </div>
-    );
-    return (
-      <div>
-        <InputGroup className="input-group date-time-picker-pf">
-          <FormControl
-            {...inputProps}
-            aria-label="date-picker-input"
-            type="text"
-            className="date-time-input"
-            name={name}
-            value={hiddenValue && !required ? '' : formatDateTime(value)}
-            onChange={e => this.setSelected(e.target.value)}
-          />
-          <Popover
-            position={placement}
-            className="date-time-picker-popover"
-            bodyContent={popover}
-            onShown={() => this.setState({ hiddenValue: false })}
-            minWidth="500px"
-          >
-            <InputGroup.Addon className="date-time-picker-pf">
-              <Icon>
-                <OutlinedCalendarAltIcon />
-              </Icon>
-            </InputGroup.Addon>
-          </Popover>
-          {!required && (
-            <InputGroup.Addon
-              className="clear-button"
-              onClick={this.clearSelected}
+        <InputGroup>
+          <InputGroupItem className="pf-v5-c-date-picker__input pf-v5-c-date-picker ">
+            <TextInput
+              ouiaId="datetime-picker-input"
+              type="text"
+              id={id}
+              name={name}
+              aria-label="date and time picker"
+              value={value}
+              onChange={(e, newValue) => {
+                setValue(newValue);
+                setIsCalendarOpen(false);
+              }}
+              onBlur={onBlur}
+              isRequired={required}
+              validated={errorText ? 'error' : 'default'}
+              placeholder="YYYY-MM-DD HH:MM"
+              className=" pf-v5-c-form-control"
+              {...inputProps}
+            />
+          </InputGroupItem>
+          <InputGroupItem className="date-picker-input-item">
+            <Button
+              ouiaId="toggle-calendar-button"
+              variant="control"
+              aria-label="Toggle date picker"
+              onClick={onToggleCalendar}
             >
-              <Icon>
-                <TimesIcon />
-              </Icon>
-            </InputGroup.Addon>
-          )}
+              <OutlinedCalendarAltIcon />
+            </Button>
+          </InputGroupItem>
+          <InputGroupItem className="date-picker-input-item">
+            <TimePicker
+              value={valueTime}
+              onChange={onSelectTime}
+              id={`${id}-time-picker`}
+              locale={locale}
+              is24Hour
+            />
+          </InputGroupItem>
         </InputGroup>
-      </div>
-    );
-  }
-}
+      </Popover>
+      {errorText && (
+        <HelperText>
+          <HelperTextItem variant="error">{errorText}</HelperTextItem>
+        </HelperText>
+      )}
+    </div>
+  );
+};
 
 DateTimePicker.propTypes = {
   value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
@@ -129,6 +217,7 @@ DateTimePicker.propTypes = {
   placement: PropTypes.string,
   name: PropTypes.string,
   required: PropTypes.bool,
+  isFutureOnly: PropTypes.bool,
   onChange: PropTypes.func,
 };
 
@@ -141,6 +230,7 @@ DateTimePicker.defaultProps = {
   placement: 'top',
   name: undefined,
   required: false,
+  isFutureOnly: false,
   onChange: noop,
 };
 export default DateTimePicker;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateTimePicker.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateTimePicker.test.js
index b9a0435edd1..fd27bab36f6 100644
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateTimePicker.test.js
+++ b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/DateTimePicker.test.js
@@ -1,24 +1,268 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import DateTimePicker from './DateTimePicker';
 
 describe('DateTimePicker', () => {
-  test('renders properly', () => {
-    const component = mount(<DateTimePicker/>);
-    expect(component.render()).toMatchSnapshot();
+  test('renders properly', async () => {
+    const { container } = render(<DateTimePicker />);
+
+    const dateTimeInput = screen.getByLabelText('date and time picker');
+    expect(dateTimeInput).toBeInTheDocument();
+
+    const calendarButton = screen.getByLabelText('Toggle date picker');
+    expect(calendarButton).toBeInTheDocument();
+
+    const wrapper = container.querySelector('.date-time-picker-pf-wrapper');
+    expect(wrapper).toBeInTheDocument();
+    expect(calendarButton).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.click(calendarButton);
+    });
+    const todayButton = screen.getByText('Today');
+    expect(todayButton).toBeInTheDocument();
+    const clearButton = screen.getByText('Clear');
+    expect(clearButton).toBeInTheDocument();
   });
 
   test('prefils the value from prop', () => {
-    const component = mount(<DateTimePicker value="2/21/2019 , 2:22:31 PM"/>);
-    expect(component.render()).toMatchSnapshot();
+    const testDate = new Date('2024-01-15T14:30:00');
+    const { container } = render(<DateTimePicker value={testDate} />);
+
+    const dateTimeInput = container.querySelector(
+      'input[aria-label="date and time picker"]'
+    );
+    expect(dateTimeInput).toBeInTheDocument();
+    expect(dateTimeInput).toHaveValue('2024-01-15 14:30');
   });
 
   test('edit works', () => {
-    const component = mount(<DateTimePicker value="2/21/2019 ,2:22:31 PM" />);
-    component
-      .find('input')
-      .simulate('change', { target: { value: '2/22/2019 , 2:22:31 PM' } });
-    expect(component.state().value).toEqual(new Date('2/22/2019 , 2:22:31 PM'));
-    expect(component.render()).toMatchSnapshot();
+    const { container } = render(<DateTimePicker />);
+
+    const dateTimeInput = container.querySelector(
+      'input[aria-label="date and time picker"]'
+    );
+    fireEvent.change(dateTimeInput, { target: { value: '2024-12-25 16:45' } });
+
+    expect(dateTimeInput).toHaveValue('2024-12-25 16:45');
+  });
+
+  test('clear button clears the value', async () => {
+    const testDate = new Date('2024-01-15T14:30:00');
+    const { container } = render(<DateTimePicker value={testDate} />);
+
+    const dateTimeInput = container.querySelector(
+      'input[aria-label="date and time picker"]'
+    );
+    const calendarButton = screen.getByLabelText('Toggle date picker');
+
+    expect(dateTimeInput).toHaveValue('2024-01-15 14:30');
+    await act(async () => {
+      fireEvent.click(calendarButton);
+    });
+    const clearButton = screen.getByText('Clear');
+    fireEvent.click(clearButton);
+    expect(dateTimeInput).toHaveValue('');
+  });
+
+  test('calendar toggle button works', async () => {
+    render(<DateTimePicker />);
+
+    const calendarButton = screen.getByLabelText('Toggle date picker');
+    expect(calendarButton).toBeInTheDocument();
+    expect(screen.queryByRole('dialog')).toBeNull();
+    await act(async () => {
+      fireEvent.click(calendarButton);
+    });
+    expect(screen.queryByRole('dialog')).toBeVisible();
+  });
+
+  test('shows error when required field is empty', async () => {
+    const { container } = render(<DateTimePicker required />);
+
+    const dateTimeInput = container.querySelector(
+      'input[aria-label="date and time picker"]'
+    );
+    const calendarButton = screen.getByLabelText('Toggle date picker');
+
+    expect(
+      screen.queryByText('Date and time are required')
+    ).not.toBeInTheDocument();
+    await act(async () => {
+      fireEvent.click(calendarButton);
+    });
+    const clearButton = screen.getByText('Clear');
+    fireEvent.click(clearButton);
+    expect(
+      screen.queryByText('Date and time are required')
+    ).toBeInTheDocument();
+    expect(dateTimeInput).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  test('passes props to components', () => {
+    const { container } = render(
+      <DateTimePicker
+        name="test-datetime"
+        id="test-datetime-picker"
+        locale="en-US"
+        weekStartsOn={0}
+        placement="bottom"
+        required
+      />
+    );
+
+    const dateTimeInput = container.querySelector(
+      'input[name="test-datetime"]'
+    );
+
+    expect(dateTimeInput).toBeInTheDocument();
+    expect(dateTimeInput).toHaveAttribute('name', 'test-datetime');
+    expect(dateTimeInput).toHaveAttribute('id', 'test-datetime-picker');
+    expect(dateTimeInput).toHaveAttribute('required', '');
+  });
+
+  test('renders TimePicker component', () => {
+    const { container } = render(<DateTimePicker />);
+
+    const timePickerInput = container.querySelector(
+      'input[aria-label="Time picker"]'
+    );
+    expect(timePickerInput).toBeInTheDocument();
+  });
+
+  test('handles onBlur to format date and time', () => {
+    const { container } = render(<DateTimePicker />);
+
+    const dateTimeInput = container.querySelector(
+      'input[aria-label="date and time picker"]'
+    );
+
+    fireEvent.change(dateTimeInput, { target: { value: '2024-01-15  14:30' } });
+    expect(dateTimeInput).toHaveValue('2024-01-15  14:30');
+    fireEvent.blur(dateTimeInput);
+
+    expect(dateTimeInput).toHaveValue('2024-01-15 14:30');
+  });
+
+  describe('isFutureOnly validation', () => {
+    test('shows error when past date is entered with isFutureOnly', () => {
+      const pastDate = new Date();
+      pastDate.setFullYear(pastDate.getFullYear() - 1);
+      const pastDateString = `${pastDate.getFullYear()}-${String(
+        pastDate.getMonth() + 1
+      ).padStart(2, '0')}-${String(pastDate.getDate()).padStart(2, '0')} 14:30`;
+
+      const { container } = render(<DateTimePicker isFutureOnly />);
+
+      const dateTimeInput = container.querySelector(
+        'input[aria-label="date and time picker"]'
+      );
+      expect(
+        screen.queryByText('Date must be in the future')
+      ).not.toBeInTheDocument();
+      fireEvent.change(dateTimeInput, { target: { value: pastDateString } });
+      fireEvent.blur(dateTimeInput);
+
+      expect(
+        screen.queryByText('Date must be in the future')
+      ).toBeInTheDocument();
+      expect(dateTimeInput).toHaveAttribute('aria-invalid', 'true');
+    });
+
+    test('does not show error when future date is entered with isFutureOnly', () => {
+      const futureDate = new Date();
+      futureDate.setFullYear(futureDate.getFullYear() + 1);
+      const futureDateString = `${futureDate.getFullYear()}-${String(
+        futureDate.getMonth() + 1
+      ).padStart(2, '0')}-${String(futureDate.getDate()).padStart(
+        2,
+        '0'
+      )} 14:30`;
+
+      const { container } = render(<DateTimePicker isFutureOnly />);
+
+      const dateTimeInput = container.querySelector(
+        'input[aria-label="date and time picker"]'
+      );
+
+      fireEvent.change(dateTimeInput, { target: { value: futureDateString } });
+      fireEvent.blur(dateTimeInput);
+
+      expect(
+        screen.queryByText('Date must be in the future')
+      ).not.toBeInTheDocument();
+      expect(dateTimeInput).not.toHaveAttribute('aria-invalid', 'true');
+    });
+
+    test('allows past dates when isFutureOnly is false', () => {
+      const pastDate = new Date();
+      pastDate.setFullYear(pastDate.getFullYear() - 1);
+      const pastDateString = `${pastDate.getFullYear()}-${String(
+        pastDate.getMonth() + 1
+      ).padStart(2, '0')}-${String(pastDate.getDate()).padStart(2, '0')} 14:30`;
+
+      const { container } = render(<DateTimePicker isFutureOnly={false} />);
+
+      const dateTimeInput = container.querySelector(
+        'input[aria-label="date and time picker"]'
+      );
+
+      fireEvent.change(dateTimeInput, { target: { value: pastDateString } });
+      fireEvent.blur(dateTimeInput);
+
+      expect(
+        screen.queryByText('Date must be in the future')
+      ).not.toBeInTheDocument();
+    });
+
+    test('shows error when current date with past time is entered with isFutureOnly', () => {
+      const now = new Date();
+      const pastTime = new Date(now);
+      pastTime.setHours(now.getHours() - 1);
+      const pastTimeString = `${now.getFullYear()}-${String(
+        now.getMonth() + 1
+      ).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(
+        pastTime.getHours()
+      ).padStart(2, '0')}:${String(pastTime.getMinutes()).padStart(2, '0')}`;
+
+      const { container } = render(<DateTimePicker isFutureOnly />);
+
+      const dateTimeInput = container.querySelector(
+        'input[aria-label="date and time picker"]'
+      );
+
+      fireEvent.change(dateTimeInput, { target: { value: pastTimeString } });
+      fireEvent.blur(dateTimeInput);
+
+      expect(
+        screen.queryByText('Date must be in the future')
+      ).toBeInTheDocument();
+      expect(dateTimeInput).toHaveAttribute('aria-invalid', 'true');
+    });
+
+    test('does not show error when current date with future time is entered with isFutureOnly', () => {
+      const now = new Date();
+      const futureTime = new Date(now);
+      futureTime.setHours(now.getHours() + 1);
+      const futureTimeString = `${now.getFullYear()}-${String(
+        now.getMonth() + 1
+      ).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(
+        futureTime.getHours()
+      ).padStart(2, '0')}:${String(futureTime.getMinutes()).padStart(2, '0')}`;
+
+      const { container } = render(<DateTimePicker isFutureOnly />);
+
+      const dateTimeInput = container.querySelector(
+        'input[aria-label="date and time picker"]'
+      );
+
+      fireEvent.change(dateTimeInput, { target: { value: futureTimeString } });
+      fireEvent.blur(dateTimeInput);
+
+      expect(
+        screen.queryByText('Date must be in the future')
+      ).not.toBeInTheDocument();
+      expect(dateTimeInput).not.toHaveAttribute('aria-invalid', 'true');
+    });
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeClock.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeClock.js
deleted file mode 100644
index e0bef572ab9..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeClock.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { noop } from '../../../../common/helpers';
-import { HOUR, MINUTE } from './TimeConstants';
-
-class PickTimeClock extends React.Component {
-  state = {
-    ampm: this.props.time.getHours() >= 12 ? 'PM' : 'AM',
-  };
-  componentDidUpdate = prevProps => {
-    const newTime = this.props.time;
-    if (prevProps.time !== newTime) {
-      this.setAMPM(newTime);
-    }
-  };
-  setAMPM = time => {
-    this.setState({ ampm: time.getHours() >= 12 ? 'PM' : 'AM' });
-  };
-  setTime = (type, amount) => {
-    const { time } = this.props;
-    if (type === HOUR) {
-      time.setHours(time.getHours() + amount);
-    } else if (type === MINUTE) {
-      time.setMinutes(time.getMinutes() + amount);
-    }
-    this.props.setSelected(time);
-  };
-  toggleAMPM = () => {
-    const { time } = this.props;
-    if (this.state.ampm === 'AM') {
-      time.setHours(time.getHours() + 12);
-      this.setState({ ampm: 'PM' });
-    } else {
-      time.setHours(time.getHours() - 12);
-      this.setState({ ampm: 'AM' });
-    }
-    this.props.setSelected(time);
-  };
-  render() {
-    const { time, toggleTimeTable } = this.props;
-    const minutes = time.getMinutes();
-    const hours = time.getHours() % 12 || 12;
-
-    return (
-      <div className="timepicker-picker">
-        <table>
-          <tbody>
-            <tr>
-              <td onClick={() => this.setTime(HOUR, 1)}>
-                <a className="btn clock-btn increment-hour">
-                  <span className="glyphicon glyphicon-chevron-up" />
-                </a>
-              </td>
-              <td className="separator" />
-              <td onClick={() => this.setTime(MINUTE, 1)}>
-                <a className="btn clock-btn increment-min">
-                  <span className="glyphicon glyphicon-chevron-up" />
-                </a>
-              </td>
-              <td className="separator" />
-            </tr>
-            <tr>
-              <td onClick={() => toggleTimeTable(HOUR)}>
-                <span className="timepicker-hour">
-                  {`${hours}`.padStart(2, '0')}
-                </span>
-              </td>
-              <td className="separator">:</td>
-              <td onClick={() => toggleTimeTable(MINUTE)}>
-                <span className="timepicker-minute">
-                  {`${minutes}`.padStart(2, '0')}
-                </span>
-              </td>
-              <td>
-                <button
-                  type="button"
-                  className="btn btn-primary ampm-toggle"
-                  onClick={() => this.toggleAMPM()}
-                >
-                  {this.state.ampm}
-                </button>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <a
-                  className="btn clock-btn decrement-hour"
-                  onClick={() => this.setTime(HOUR, -1)}
-                >
-                  <span className="glyphicon glyphicon-chevron-down" />
-                </a>
-              </td>
-              <td className="separator" />
-              <td>
-                <a
-                  className="btn clock-btn decrement-min"
-                  onClick={() => this.setTime(MINUTE, -1)}
-                >
-                  <span className="glyphicon glyphicon-chevron-down" />
-                </a>
-              </td>
-              <td className="separator" />
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-}
-
-PickTimeClock.propTypes = {
-  time: PropTypes.instanceOf(Date).isRequired,
-  setSelected: PropTypes.func,
-  toggleTimeTable: PropTypes.func,
-};
-PickTimeClock.defaultProps = {
-  setSelected: noop,
-  toggleTimeTable: noop,
-};
-export default PickTimeClock;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeClock.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeClock.test.js
deleted file mode 100644
index b98ac585b97..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeClock.test.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import PickTimeClock from './PickTimeClock';
-import { MINUTE, HOUR } from './TimeConstants';
-
-test('PickTimeClock is working properly', () => {
-  const time = new Date('2/21/2019 , 2:22:31 PM');
-  const component = shallow(<PickTimeClock time={time} />);
-
-  expect(component.render()).toMatchSnapshot();
-});
-
-test('Edit minutes of PickTimeClock', () => {
-  const time = new Date('2/21/2019 , 2:22:31 PM');
-  const setSelected = jest.fn();
-  const component = mount(
-    <PickTimeClock time={time} setSelected={setSelected} />
-  );
-  expect(component.render()).toMatchSnapshot();
-  component.find('.increment-min').simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('2/21/2019 , 2:23:31 PM'));
-  component.find('.decrement-min').simulate('click');
-  component.find('.decrement-min').simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('2/21/2019 , 2:21:31 PM'));
-});
-
-test('Edit hours of PickTimeClock', () => {
-  const time = new Date('2/21/2019 , 2:22:31 PM');
-  const setSelected = jest.fn();
-  const component = mount(
-    <PickTimeClock time={time} setSelected={setSelected} />
-  );
-  expect(component.render()).toMatchSnapshot();
-  component.find('.increment-hour').simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('2/21/2019 , 3:22:31 PM'));
-  component.find('.decrement-hour').simulate('click');
-  component.find('.decrement-hour').simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('2/21/2019 , 1:22:31 PM'));
-});
-
-test('Toggle hours of PickTimeClock', () => {
-  const time = new Date('2/21/2019 , 12:22:31 PM');
-  const component = mount(<PickTimeClock time={time} />);
-  expect(component.state().ampm).toEqual('PM');
-  component.find('.ampm-toggle').simulate('click');
-  expect(component.state().ampm).toEqual('AM');
-  expect(component.render()).toMatchSnapshot();
-  component.find('.ampm-toggle').simulate('click');
-  expect(component.state().ampm).toEqual('PM');
-});
-test('Toggle TimeTable hour from PickTimeClock', () => {
-  const time = new Date('2/21/2019 , 12:22:31 PM');
-  const toggleTimeTable = jest.fn();
-  const component = mount(
-    <PickTimeClock time={time} toggleTimeTable={toggleTimeTable} />
-  );
-
-  component.find('.timepicker-hour').simulate('click');
-  expect(toggleTimeTable).toBeCalledWith(HOUR);
-});
-
-test('Toggle TimeTable minute from PickTimeClock', () => {
-  const time = new Date('2/21/2019 , 12:22:31 PM');
-  const toggleTimeTable = jest.fn();
-  const component = mount(
-    <PickTimeClock time={time} toggleTimeTable={toggleTimeTable} />
-  );
-
-  component.find('.timepicker-minute').simulate('click');
-  expect(toggleTimeTable).toBeCalledWith(MINUTE);
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeTable.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeTable.js
deleted file mode 100644
index e61d982cb68..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeTable.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { noop } from '../../../../common/helpers';
-import { HOUR } from './TimeConstants';
-
-class PickTimeTable extends React.Component {
-  setTime = (newTime, type) => {
-    const { time, setSelected, toggleTimeTable } = this.props;
-    const hours = time.getHours();
-    newTime = parseInt(newTime, 10);
-    if (type === 'minute') time.setMinutes(newTime);
-    else if (type === 'hour') {
-      time.setHours(hours < 12 ? newTime % 12 : (newTime % 12) + 12);
-    }
-    setSelected(time);
-    toggleTimeTable();
-  };
-  getTimeTable = (array, type) => (
-    <div className={`timepicker-${type}s`}>
-      <table className="table-condensed">
-        <tbody>
-          {array.map((row, idx) => (
-            <tr key={idx}>
-              {row.map(hour => (
-                <td
-                  key={hour}
-                  className={type}
-                  onClick={() => this.setTime(hour, type)}
-                >
-                  {hour}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-  render() {
-    const hoursArray = [
-      ['12', '01', '02', '03'],
-      ['04', '05', '06', '07'],
-      ['08', '09', '10', '11'],
-    ];
-    const minutesArray = [
-      ['00', '05', '10', '15'],
-      ['20', '25', '30', '35'],
-      ['40', '45', '50', '55'],
-    ];
-    return this.props.type === HOUR
-      ? this.getTimeTable(hoursArray, 'hour')
-      : this.getTimeTable(minutesArray, 'minute');
-  }
-}
-PickTimeTable.propTypes = {
-  time: PropTypes.instanceOf(Date).isRequired,
-  setSelected: PropTypes.func,
-  toggleTimeTable: PropTypes.func,
-  type: PropTypes.string.isRequired,
-};
-PickTimeTable.defaultProps = {
-  setSelected: noop,
-  toggleTimeTable: noop,
-};
-export default PickTimeTable;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeTable.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeTable.test.js
deleted file mode 100644
index 9cbd183db0c..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/PickTimeTable.test.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import PickTimeTable from './PickTimeTable';
-import { MINUTE, HOUR } from './TimeConstants';
-
-test('PickTimeTable is working properly for Minute', () => {
-  const time = new Date('2019-01-04   14:22:31');
-  const setSelected = jest.fn();
-  const component = shallow(
-    <PickTimeTable time={time} type={MINUTE} setSelected={setSelected} />
-  );
-  expect(component.render()).toMatchSnapshot();
-  component
-    .find('.minute')
-    .first()
-    .simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('2019-01-04   14:00:31'));
-});
-
-test('PickTimeTable is working properly for Hour', () => {
-  const time = new Date('2019-01-04   14:22:31');
-  const setSelected = jest.fn();
-  const component = shallow(
-    <PickTimeTable time={time} type={HOUR} setSelected={setSelected} />
-  );
-  expect(component.render()).toMatchSnapshot();
-  component
-    .find('.hour')
-    .first()
-    .simulate('click');
-  expect(setSelected).toBeCalledWith(new Date('2019-01-04 12:22:31'));
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/TimeConstants.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/TimeConstants.js
deleted file mode 100644
index c3ed6128466..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/TimeConstants.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const MINUTE = 'MINUTE';
-export const HOUR = 'HOUR';
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/TimeInput.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/TimeInput.js
deleted file mode 100644
index 8e8f9fc3c5e..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/TimeInput.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import PickTimeTable from './PickTimeTable';
-import PickTimeClock from './PickTimeClock';
-import { noop } from '../../../../common/helpers';
-import { HOUR } from './TimeConstants';
-
-class TimeInput extends React.Component {
-  state = {
-    isTimeTableOpen: this.props.isTimeTableOpen,
-    typeOfTimeInput: HOUR,
-  };
-  componentDidUpdate = prevProps => {
-    const { time: nextTime, isTimeTableOpen } = this.props;
-    if (prevProps.time !== nextTime) {
-      this.setIsTimeTableOpen(isTimeTableOpen);
-    }
-  };
-  setIsTimeTableOpen = isTimeTableOpen => {
-    this.setState({
-      isTimeTableOpen,
-    });
-  };
-  toggleTimeTable = type => {
-    this.setState({
-      typeOfTimeInput: type,
-      isTimeTableOpen: !this.state.isTimeTableOpen,
-    });
-  };
-  render() {
-    const { time, setSelected } = this.props;
-    const { typeOfTimeInput, isTimeTableOpen } = this.state;
-    return (
-      <div className="timepicker col-md-6">
-        {isTimeTableOpen ? (
-          <PickTimeTable
-            time={time}
-            setSelected={setSelected}
-            type={typeOfTimeInput}
-            show={isTimeTableOpen}
-            toggleTimeTable={this.toggleTimeTable}
-          />
-        ) : (
-          <PickTimeClock
-            time={time}
-            setSelected={setSelected}
-            toggleTimeTable={this.toggleTimeTable}
-          />
-        )}
-      </div>
-    );
-  }
-}
-
-TimeInput.propTypes = {
-  setSelected: PropTypes.func,
-  time: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  isTimeTableOpen: PropTypes.bool,
-};
-TimeInput.defaultProps = {
-  setSelected: noop,
-  time: new Date(),
-  isTimeTableOpen: false,
-};
-export default TimeInput;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/TimeInput.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/TimeInput.test.js
deleted file mode 100644
index 221fe4803e3..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/TimeInput.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import TimeInput from './TimeInput';
-
-test('TimeInput is working properly', () => {
-  const time = new Date('2019-01-04   14:22:31');
-  const component = shallow(<TimeInput time={time} />);
-
-  expect(component.render()).toMatchSnapshot();
-});
-test('TimeInput toggles view to hours', () => {
-  const time = new Date('2019-01-04   14:22:31');
-  const component = mount(<TimeInput time={time} />);
-  component
-    .find('.timepicker-hour')
-    .first()
-    .simulate('click');
-  expect(component.render()).toMatchSnapshot();
-});
-test('TimeInput toggles view to minutes', () => {
-  const time = new Date('2019-01-04   14:22:31');
-  const component = mount(<TimeInput time={time} />);
-  component
-    .find('.timepicker-minute')
-    .first()
-    .simulate('click');
-  expect(component.render()).toMatchSnapshot();
-});
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/__snapshots__/PickTimeClock.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/__snapshots__/PickTimeClock.test.js.snap
deleted file mode 100644
index b14059a4546..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/__snapshots__/PickTimeClock.test.js.snap
+++ /dev/null
@@ -1,369 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Edit hours of PickTimeClock 1`] = `
-<div
-  class="timepicker-picker"
->
-  <table>
-    <tbody>
-      <tr>
-        <td>
-          <a
-            class="btn clock-btn increment-hour"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-up"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-        <td>
-          <a
-            class="btn clock-btn increment-min"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-up"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-      </tr>
-      <tr>
-        <td>
-          <span
-            class="timepicker-hour"
-          >
-            02
-          </span>
-        </td>
-        <td
-          class="separator"
-        >
-          :
-        </td>
-        <td>
-          <span
-            class="timepicker-minute"
-          >
-            22
-          </span>
-        </td>
-        <td>
-          <button
-            class="btn btn-primary ampm-toggle"
-            type="button"
-          >
-            PM
-          </button>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a
-            class="btn clock-btn decrement-hour"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-down"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-        <td>
-          <a
-            class="btn clock-btn decrement-min"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-down"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`Edit minutes of PickTimeClock 1`] = `
-<div
-  class="timepicker-picker"
->
-  <table>
-    <tbody>
-      <tr>
-        <td>
-          <a
-            class="btn clock-btn increment-hour"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-up"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-        <td>
-          <a
-            class="btn clock-btn increment-min"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-up"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-      </tr>
-      <tr>
-        <td>
-          <span
-            class="timepicker-hour"
-          >
-            02
-          </span>
-        </td>
-        <td
-          class="separator"
-        >
-          :
-        </td>
-        <td>
-          <span
-            class="timepicker-minute"
-          >
-            22
-          </span>
-        </td>
-        <td>
-          <button
-            class="btn btn-primary ampm-toggle"
-            type="button"
-          >
-            PM
-          </button>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a
-            class="btn clock-btn decrement-hour"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-down"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-        <td>
-          <a
-            class="btn clock-btn decrement-min"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-down"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`PickTimeClock is working properly 1`] = `
-<div
-  class="timepicker-picker"
->
-  <table>
-    <tbody>
-      <tr>
-        <td>
-          <a
-            class="btn clock-btn increment-hour"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-up"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-        <td>
-          <a
-            class="btn clock-btn increment-min"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-up"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-      </tr>
-      <tr>
-        <td>
-          <span
-            class="timepicker-hour"
-          >
-            02
-          </span>
-        </td>
-        <td
-          class="separator"
-        >
-          :
-        </td>
-        <td>
-          <span
-            class="timepicker-minute"
-          >
-            22
-          </span>
-        </td>
-        <td>
-          <button
-            class="btn btn-primary ampm-toggle"
-            type="button"
-          >
-            PM
-          </button>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a
-            class="btn clock-btn decrement-hour"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-down"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-        <td>
-          <a
-            class="btn clock-btn decrement-min"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-down"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`Toggle hours of PickTimeClock 1`] = `
-<div
-  class="timepicker-picker"
->
-  <table>
-    <tbody>
-      <tr>
-        <td>
-          <a
-            class="btn clock-btn increment-hour"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-up"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-        <td>
-          <a
-            class="btn clock-btn increment-min"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-up"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-      </tr>
-      <tr>
-        <td>
-          <span
-            class="timepicker-hour"
-          >
-            12
-          </span>
-        </td>
-        <td
-          class="separator"
-        >
-          :
-        </td>
-        <td>
-          <span
-            class="timepicker-minute"
-          >
-            22
-          </span>
-        </td>
-        <td>
-          <button
-            class="btn btn-primary ampm-toggle"
-            type="button"
-          >
-            AM
-          </button>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a
-            class="btn clock-btn decrement-hour"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-down"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-        <td>
-          <a
-            class="btn clock-btn decrement-min"
-          >
-            <span
-              class="glyphicon glyphicon-chevron-down"
-            />
-          </a>
-        </td>
-        <td
-          class="separator"
-        />
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/__snapshots__/PickTimeTable.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/__snapshots__/PickTimeTable.test.js.snap
deleted file mode 100644
index 8020c36d2df..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/__snapshots__/PickTimeTable.test.js.snap
+++ /dev/null
@@ -1,159 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PickTimeTable is working properly for Hour 1`] = `
-<div
-  class="timepicker-hours"
->
-  <table
-    class="table-condensed"
-  >
-    <tbody>
-      <tr>
-        <td
-          class="hour"
-        >
-          12
-        </td>
-        <td
-          class="hour"
-        >
-          01
-        </td>
-        <td
-          class="hour"
-        >
-          02
-        </td>
-        <td
-          class="hour"
-        >
-          03
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="hour"
-        >
-          04
-        </td>
-        <td
-          class="hour"
-        >
-          05
-        </td>
-        <td
-          class="hour"
-        >
-          06
-        </td>
-        <td
-          class="hour"
-        >
-          07
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="hour"
-        >
-          08
-        </td>
-        <td
-          class="hour"
-        >
-          09
-        </td>
-        <td
-          class="hour"
-        >
-          10
-        </td>
-        <td
-          class="hour"
-        >
-          11
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`PickTimeTable is working properly for Minute 1`] = `
-<div
-  class="timepicker-minutes"
->
-  <table
-    class="table-condensed"
-  >
-    <tbody>
-      <tr>
-        <td
-          class="minute"
-        >
-          00
-        </td>
-        <td
-          class="minute"
-        >
-          05
-        </td>
-        <td
-          class="minute"
-        >
-          10
-        </td>
-        <td
-          class="minute"
-        >
-          15
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="minute"
-        >
-          20
-        </td>
-        <td
-          class="minute"
-        >
-          25
-        </td>
-        <td
-          class="minute"
-        >
-          30
-        </td>
-        <td
-          class="minute"
-        >
-          35
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="minute"
-        >
-          40
-        </td>
-        <td
-          class="minute"
-        >
-          45
-        </td>
-        <td
-          class="minute"
-        >
-          50
-        </td>
-        <td
-          class="minute"
-        >
-          55
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/__snapshots__/TimeInput.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/__snapshots__/TimeInput.test.js.snap
deleted file mode 100644
index c56331a814d..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimeComponents/__snapshots__/TimeInput.test.js.snap
+++ /dev/null
@@ -1,263 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TimeInput is working properly 1`] = `
-<div
-  class="timepicker col-md-6"
->
-  <div
-    class="timepicker-picker"
-  >
-    <table>
-      <tbody>
-        <tr>
-          <td>
-            <a
-              class="btn clock-btn increment-hour"
-            >
-              <span
-                class="glyphicon glyphicon-chevron-up"
-              />
-            </a>
-          </td>
-          <td
-            class="separator"
-          />
-          <td>
-            <a
-              class="btn clock-btn increment-min"
-            >
-              <span
-                class="glyphicon glyphicon-chevron-up"
-              />
-            </a>
-          </td>
-          <td
-            class="separator"
-          />
-        </tr>
-        <tr>
-          <td>
-            <span
-              class="timepicker-hour"
-            >
-              02
-            </span>
-          </td>
-          <td
-            class="separator"
-          >
-            :
-          </td>
-          <td>
-            <span
-              class="timepicker-minute"
-            >
-              22
-            </span>
-          </td>
-          <td>
-            <button
-              class="btn btn-primary ampm-toggle"
-              type="button"
-            >
-              PM
-            </button>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <a
-              class="btn clock-btn decrement-hour"
-            >
-              <span
-                class="glyphicon glyphicon-chevron-down"
-              />
-            </a>
-          </td>
-          <td
-            class="separator"
-          />
-          <td>
-            <a
-              class="btn clock-btn decrement-min"
-            >
-              <span
-                class="glyphicon glyphicon-chevron-down"
-              />
-            </a>
-          </td>
-          <td
-            class="separator"
-          />
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
-
-exports[`TimeInput toggles view to hours 1`] = `
-<div
-  class="timepicker col-md-6"
->
-  <div
-    class="timepicker-hours"
-  >
-    <table
-      class="table-condensed"
-    >
-      <tbody>
-        <tr>
-          <td
-            class="hour"
-          >
-            12
-          </td>
-          <td
-            class="hour"
-          >
-            01
-          </td>
-          <td
-            class="hour"
-          >
-            02
-          </td>
-          <td
-            class="hour"
-          >
-            03
-          </td>
-        </tr>
-        <tr>
-          <td
-            class="hour"
-          >
-            04
-          </td>
-          <td
-            class="hour"
-          >
-            05
-          </td>
-          <td
-            class="hour"
-          >
-            06
-          </td>
-          <td
-            class="hour"
-          >
-            07
-          </td>
-        </tr>
-        <tr>
-          <td
-            class="hour"
-          >
-            08
-          </td>
-          <td
-            class="hour"
-          >
-            09
-          </td>
-          <td
-            class="hour"
-          >
-            10
-          </td>
-          <td
-            class="hour"
-          >
-            11
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
-
-exports[`TimeInput toggles view to minutes 1`] = `
-<div
-  class="timepicker col-md-6"
->
-  <div
-    class="timepicker-minutes"
-  >
-    <table
-      class="table-condensed"
-    >
-      <tbody>
-        <tr>
-          <td
-            class="minute"
-          >
-            00
-          </td>
-          <td
-            class="minute"
-          >
-            05
-          </td>
-          <td
-            class="minute"
-          >
-            10
-          </td>
-          <td
-            class="minute"
-          >
-            15
-          </td>
-        </tr>
-        <tr>
-          <td
-            class="minute"
-          >
-            20
-          </td>
-          <td
-            class="minute"
-          >
-            25
-          </td>
-          <td
-            class="minute"
-          >
-            30
-          </td>
-          <td
-            class="minute"
-          >
-            35
-          </td>
-        </tr>
-        <tr>
-          <td
-            class="minute"
-          >
-            40
-          </td>
-          <td
-            class="minute"
-          >
-            45
-          </td>
-          <td
-            class="minute"
-          >
-            50
-          </td>
-          <td
-            class="minute"
-          >
-            55
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimePicker.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimePicker.js
index 0d343f2a747..bb1870874b7 100644
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimePicker.js
+++ b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimePicker.js
@@ -1,88 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormControl, InputGroup } from 'patternfly-react';
-import { Icon, Popover } from '@patternfly/react-core';
-import { OutlinedClockIcon } from '@patternfly/react-icons';
-import TimeInput from './TimeComponents/TimeInput';
+import { TimePicker as PfTimePicker } from '@patternfly/react-core';
+import { formatTime } from './dateTimeHelpers';
 
-class TimePicker extends React.Component {
-  getDateFromTime = time => {
-    if (Date.parse(time)) {
-      return new Date(time);
-    }
-    return new Date(`1/1/1 ${time}`);
-  };
-  state = {
-    value: this.getDateFromTime(this.props.value),
-  };
-  formatDate = () => {
-    const { locale } = this.props;
-    const { value } = this.state;
-    const options = { hour: 'numeric', minute: 'numeric' };
-    return value.toLocaleString(locale, options);
-  };
-  setSelected = date => {
-    if (Date.parse(date)) {
-      const newDate = new Date(date);
-      this.setState({ value: newDate });
-    } else if (Date.parse(`1/1/1 ${date}`)) {
-      const newDate = new Date(`1/1/1 ${date}`);
-      this.setState({ value: newDate });
-    }
-  };
-  render() {
-    const { locale } = this.props;
-    const popover = (
-      <div
-        className="row bootstrap-datetimepicker-widget timepicker-sbs"
-        id="popover-date-picker"
-      >
-        <ul className="list-unstyled">
-          <li className="picker-switch accordion-toggle">
-            <table className="table-condensed">
-              <tbody>
-                <tr />
-              </tbody>
-            </table>
-          </li>
-          <li>
-            <TimeInput
-              time={this.state.value}
-              setSelected={this.setSelected}
-              locale={locale}
-            />
-          </li>
-        </ul>
-      </div>
-    );
-    return (
-      <div>
-        <Popover bodyContent={popover}>
-          <InputGroup className="input-group date-time-picker-pf">
-            <FormControl
-              aria-label="date-time-picker-input"
-              type="text"
-              value={this.formatDate()}
-              onChange={e => this.setSelected(e.target.value)}
-            />
-            <InputGroup.Addon className="date-picker-pf">
-              <Icon>
-                <OutlinedClockIcon />
-              </Icon>
-            </InputGroup.Addon>
-          </InputGroup>
-        </Popover>
-      </div>
-    );
-  }
-}
+// Note that PF time picker input can not be cleared / set to empty string
+const TimePicker = ({ value: initialValue, locale, name, id, onChange }) => (
+  <PfTimePicker
+    className="time-picker-pf"
+    time={formatTime(initialValue)}
+    onChange={(_event, value) => {
+      if (onChange) onChange(value);
+    }}
+    locale={locale}
+    inputProps={{ name, id }}
+    is24Hour
+  />
+);
 
 TimePicker.propTypes = {
   value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   locale: PropTypes.string,
+  name: PropTypes.string,
+  id: PropTypes.string,
+  onChange: PropTypes.func,
 };
 TimePicker.defaultProps = {
-  value: new Date(),
+  value: null,
   locale: 'en-US',
+  name: '',
+  id: '',
+  onChange: null,
 };
 export default TimePicker;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimePicker.test.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimePicker.test.js
index 11c1d4aec25..4eeff70e308 100644
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimePicker.test.js
+++ b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/TimePicker.test.js
@@ -1,24 +1,58 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import TimePicker from './TimePicker';
 
-test('TimePicker is working properly', () => {
-  const component = mount(<TimePicker value="2/2/2   5:22:31 PM" />);
+describe('TimePicker', () => {
+  test('renders properly', () => {
+    render(<TimePicker />);
+    
+    const timeInput = screen.getByLabelText('Time picker');
+    expect(timeInput).toBeInTheDocument();
+  });
 
-  expect(component.render()).toMatchSnapshot();
-});
+  test('prefils the value from prop', () => {
+    const testTime = '14:30';
+    const { container } = render(<TimePicker value={testTime} />);
+    
+    const timeInput = container.querySelector('input');
+    expect(timeInput).toBeInTheDocument();
+    expect(timeInput).toHaveValue(testTime);
+  });
 
-test('TimePicker is working properly with time only', () => {
-  const component = mount(<TimePicker value="5:22:31 PM  " />);
+  test('edit works', () => {
+    const testTime = '14:30';
+    const { container } = render(<TimePicker value={testTime} />);
+    const timeInput = container.querySelector('input');
+    expect(timeInput).toHaveValue(testTime);
+    fireEvent.change(timeInput, { target: { value: '16:45' } });
+    expect(timeInput).toHaveValue('16:45');
+  });
 
-  expect(component.render()).toMatchSnapshot();
-});
+  test('calls onChange callback when provided', () => {
+    const onChange = jest.fn();
+    const initialTime = '14:30';
+    const { container } = render(<TimePicker onChange={onChange} value={initialTime} />);
+    
+    const timeInput = container.querySelector('input');
+    fireEvent.change(timeInput, { target: { value: '18:00' } });
+    
+    expect(onChange).toHaveBeenCalledWith('18:00');
+  });
 
-test('Edit form of TimePicker', () => {
-  const component = mount(<TimePicker value="2:22:31 PM  " />);
-  component
-    .find('input')
-    .simulate('change', { target: { value: '2:42 PM  ' } });
-  expect(component.render()).toMatchSnapshot();
-  expect(component.state().value).toEqual(new Date('1/1/1 2:42:00 PM  '));
+  test('passes props to PatternFly TimePicker', () => {
+    const { container } = render(
+      <TimePicker
+        name="test-time"
+        id="test-time-picker"
+        locale="en-US"
+      />
+    );
+    
+    const timeInput = container.querySelector('input[name="test-time"]');
+    
+    expect(timeInput).toBeInTheDocument();
+    expect(timeInput).toHaveAttribute('name', 'test-time');
+    expect(timeInput).toHaveAttribute('id', 'test-time-picker');
+  });
 });
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DatePicker.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DatePicker.test.js.snap
deleted file mode 100644
index cf354d84106..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DatePicker.test.js.snap
+++ /dev/null
@@ -1,208 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DatePicker edit works 1`] = `
-<div>
-  <span
-    class="input-group date-time-picker-pf input-group"
-  >
-    <input
-      aria-label="date-time-picker-input"
-      class="date-input form-control"
-      type="text"
-      value="2019-02-22"
-    />
-    <div
-      style="display: contents;"
-    >
-      <span
-        class="date-picker-pf input-group-addon"
-      >
-        <span
-          class="pf-v5-c-icon"
-        >
-          <span
-            class="pf-v5-c-icon__content"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 448 512"
-              width="1em"
-            >
-              <path
-                d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-    </div>
-    <span
-      class="clear-button input-group-addon"
-    >
-      <span
-        class="pf-v5-c-icon"
-      >
-        <span
-          class="pf-v5-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 352 512"
-            width="1em"
-          >
-            <path
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-            />
-          </svg>
-        </span>
-      </span>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`DatePicker prefils the value from prop 1`] = `
-<div>
-  <span
-    class="input-group date-time-picker-pf input-group"
-  >
-    <input
-      aria-label="date-time-picker-input"
-      class="date-input form-control"
-      type="text"
-      value="2019-02-21"
-    />
-    <div
-      style="display: contents;"
-    >
-      <span
-        class="date-picker-pf input-group-addon"
-      >
-        <span
-          class="pf-v5-c-icon"
-        >
-          <span
-            class="pf-v5-c-icon__content"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 448 512"
-              width="1em"
-            >
-              <path
-                d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-    </div>
-    <span
-      class="clear-button input-group-addon"
-    >
-      <span
-        class="pf-v5-c-icon"
-      >
-        <span
-          class="pf-v5-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 352 512"
-            width="1em"
-          >
-            <path
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-            />
-          </svg>
-        </span>
-      </span>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`DatePicker renders properly 1`] = `
-<div>
-  <span
-    class="input-group date-time-picker-pf input-group"
-  >
-    <input
-      aria-label="date-time-picker-input"
-      class="date-input form-control"
-      type="text"
-      value=""
-    />
-    <div
-      style="display: contents;"
-    >
-      <span
-        class="date-picker-pf input-group-addon"
-      >
-        <span
-          class="pf-v5-c-icon"
-        >
-          <span
-            class="pf-v5-c-icon__content"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 448 512"
-              width="1em"
-            >
-              <path
-                d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-    </div>
-    <span
-      class="clear-button input-group-addon"
-    >
-      <span
-        class="pf-v5-c-icon"
-      >
-        <span
-          class="pf-v5-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 352 512"
-            width="1em"
-          >
-            <path
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-            />
-          </svg>
-        </span>
-      </span>
-    </span>
-  </span>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DateTimePicker.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DateTimePicker.test.js.snap
deleted file mode 100644
index 89582eec018..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DateTimePicker.test.js.snap
+++ /dev/null
@@ -1,208 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DateTimePicker edit works 1`] = `
-<div>
-  <span
-    class="input-group date-time-picker-pf input-group"
-  >
-    <input
-      aria-label="date-picker-input"
-      class="date-time-input form-control"
-      type="text"
-      value="2019-02-22 14:22:00"
-    />
-    <div
-      style="display: contents;"
-    >
-      <span
-        class="date-time-picker-pf input-group-addon"
-      >
-        <span
-          class="pf-v5-c-icon"
-        >
-          <span
-            class="pf-v5-c-icon__content"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 448 512"
-              width="1em"
-            >
-              <path
-                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-    </div>
-    <span
-      class="clear-button input-group-addon"
-    >
-      <span
-        class="pf-v5-c-icon"
-      >
-        <span
-          class="pf-v5-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 352 512"
-            width="1em"
-          >
-            <path
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-            />
-          </svg>
-        </span>
-      </span>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`DateTimePicker prefils the value from prop 1`] = `
-<div>
-  <span
-    class="input-group date-time-picker-pf input-group"
-  >
-    <input
-      aria-label="date-picker-input"
-      class="date-time-input form-control"
-      type="text"
-      value="2019-02-21 14:22:00"
-    />
-    <div
-      style="display: contents;"
-    >
-      <span
-        class="date-time-picker-pf input-group-addon"
-      >
-        <span
-          class="pf-v5-c-icon"
-        >
-          <span
-            class="pf-v5-c-icon__content"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 448 512"
-              width="1em"
-            >
-              <path
-                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-    </div>
-    <span
-      class="clear-button input-group-addon"
-    >
-      <span
-        class="pf-v5-c-icon"
-      >
-        <span
-          class="pf-v5-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 352 512"
-            width="1em"
-          >
-            <path
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-            />
-          </svg>
-        </span>
-      </span>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`DateTimePicker renders properly 1`] = `
-<div>
-  <span
-    class="input-group date-time-picker-pf input-group"
-  >
-    <input
-      aria-label="date-picker-input"
-      class="date-time-input form-control"
-      type="text"
-      value=""
-    />
-    <div
-      style="display: contents;"
-    >
-      <span
-        class="date-time-picker-pf input-group-addon"
-      >
-        <span
-          class="pf-v5-c-icon"
-        >
-          <span
-            class="pf-v5-c-icon__content"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 448 512"
-              width="1em"
-            >
-              <path
-                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-    </div>
-    <span
-      class="clear-button input-group-addon"
-    >
-      <span
-        class="pf-v5-c-icon"
-      >
-        <span
-          class="pf-v5-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 352 512"
-            width="1em"
-          >
-            <path
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-            />
-          </svg>
-        </span>
-      </span>
-    </span>
-  </span>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/TimePicker.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/TimePicker.test.js.snap
deleted file mode 100644
index 588018af2bd..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/TimePicker.test.js.snap
+++ /dev/null
@@ -1,133 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Edit form of TimePicker 1`] = `
-<div>
-  <div
-    style="display: contents;"
-  >
-    <span
-      class="input-group date-time-picker-pf input-group"
-    >
-      <input
-        aria-label="date-time-picker-input"
-        class="form-control"
-        type="text"
-        value="2:42 PM"
-      />
-      <span
-        class="date-picker-pf input-group-addon"
-      >
-        <span
-          class="pf-v5-c-icon"
-        >
-          <span
-            class="pf-v5-c-icon__content"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 512 512"
-              width="1em"
-            >
-              <path
-                d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`TimePicker is working properly 1`] = `
-<div>
-  <div
-    style="display: contents;"
-  >
-    <span
-      class="input-group date-time-picker-pf input-group"
-    >
-      <input
-        aria-label="date-time-picker-input"
-        class="form-control"
-        type="text"
-        value="5:22 PM"
-      />
-      <span
-        class="date-picker-pf input-group-addon"
-      >
-        <span
-          class="pf-v5-c-icon"
-        >
-          <span
-            class="pf-v5-c-icon__content"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 512 512"
-              width="1em"
-            >
-              <path
-                d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`TimePicker is working properly with time only 1`] = `
-<div>
-  <div
-    style="display: contents;"
-  >
-    <span
-      class="input-group date-time-picker-pf input-group"
-    >
-      <input
-        aria-label="date-time-picker-input"
-        class="form-control"
-        type="text"
-        value="5:22 PM"
-      />
-      <span
-        class="date-picker-pf input-group-addon"
-      >
-        <span
-          class="pf-v5-c-icon"
-        >
-          <span
-            class="pf-v5-c-icon__content"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 512 512"
-              width="1em"
-            >
-              <path
-                d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"
-              />
-            </svg>
-          </span>
-        </span>
-      </span>
-    </span>
-  </div>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/date-time-picker.scss b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/date-time-picker.scss
index d17f21dc0cd..e2b3e851d20 100644
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/date-time-picker.scss
+++ b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/date-time-picker.scss
@@ -1,59 +1,8 @@
-.bootstrap-datetimepicker-widget.top {
-  margin-top: -10px;
-}
-
-.bootstrap-datetimepicker-widget.bottom {
-  margin-top: 10px !important;
-}
-
-.bootstrap-datetimepicker-widget {
-  max-width: 20em;
-
-  &.timepicker-sbs {
-    max-width: 40em;
-  }
-
-  .arrow {
-    left: 10% !important;
-  }
-
-  .popover-content {
-    color: #292e34;
-  }
-
-  .clock-btn {
-    border: 0;
-    box-shadow: none;
-    color: #363636;
-    display: block;
-    padding-bottom: 4px;
-    padding-top: 4px;
+.date-picker-popover .pf-v5-c-popover__footer {
+  margin-top: 0;
+  margin-bottom: 10px;
+  .date-picker-input-items {
+    display: flex;
+    justify-content: space-evenly;
   }
-
-  table td {
-    .today-button {
-      padding: 0 16px 0 0;
-      border: 0;
-      background-color: transparent;
-
-      span {
-        height: 24px;
-        line-height: 24px;
-        color: #0088ce;
-      }
-    }
-  }
-}
-
-span.clear-button {
-  background: none;
-  border-left: none;
-  color: #72767b;
-}
-
-input.date-time-input {
-  border-right: none;
-}
-.pf-v5-c-popover.date-time-picker-popover {
-  width: 33%;
 }
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/dateTimeHelpers.js b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/dateTimeHelpers.js
new file mode 100644
index 00000000000..0664b426af9
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/dateTimeHelpers.js
@@ -0,0 +1,22 @@
+import { yyyyMMddFormat } from '@patternfly/react-core';
+
+export const formatTime = time => {
+  let now;
+  if (time) {
+    now = Number.isNaN(Date.parse(time))
+      ? new Date(`01/01/2025 ${time}`)
+      : new Date(time);
+  } else {
+    now = new Date();
+  }
+  return now.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+};
+
+export const formatDate = date => {
+  const now = date ? new Date(date) : new Date();
+  return yyyyMMddFormat(now);
+};
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/__tests__/InputFactory.test.js b/webpack/assets/javascripts/react_app/components/common/forms/__tests__/InputFactory.test.js
index af6f8fefdf5..29c8832980a 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/__tests__/InputFactory.test.js
+++ b/webpack/assets/javascripts/react_app/components/common/forms/__tests__/InputFactory.test.js
@@ -65,19 +65,19 @@ describe('InputFactory', () => {
 
     it('should render DateTimePicker for type="dateTime"', () => {
       const { container } = render(<InputFactory type="dateTime" name="test" id="test-datetime" />);
-      const input = container.querySelector('.date-time-input');
+      const input = container.querySelector('.date-time-picker-pf-wrapper');
       expect(input).toBeInTheDocument();
     });
 
     it('should render DatePicker for type="date"', () => {
       const { container } = render(<InputFactory type="date" name="test" id="test-date" />);
-      const input = container.querySelector('.date-input');
+      const input = container.querySelector('.date-picker-pf-wrapper');
       expect(input).toBeInTheDocument();
     });
 
     it('should render TimePicker for type="time"', () => {
       const { container } = render(<InputFactory type="time" name="test" id="test-time" />);
-      const input = container.querySelector('.date-time-picker-pf');
+      const input = container.querySelector('.time-picker-pf');
       expect(input).toBeInTheDocument();
     });