Created component for DateTimeInputs

src/short-urls/ShortUrlForm.tsx

@@ -3,7 +3,7 @@ import { InputType } from 'reactstrap/types/lib/Input';
 import { Button, FormGroup, Input, Row } from 'reactstrap';
 import { cond, isEmpty, pipe, replace, trim, T } from 'ramda';
 import { parseISO } from 'date-fns';
-import { DateInput, DateInputProps } from '../utils/DateInput';
+import { DateTimeInput, DateTimeInputProps } from '../utils/dates/DateTimeInput';
 import { supportsCrawlableVisits, supportsForwardQuery } from '../utils/helpers/features';
 import { SimpleCard } from '../utils/SimpleCard';
 import { handleEventPreventingDefault, hasValue, OptionalString } from '../utils/utils';
@@ -83,8 +83,8 @@ export const ShortUrlForm = (
       />
     </FormGroup>
   );
-  const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateInputProps> = {}) => (
-    <DateInput
+  const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateTimeInputProps> = {}) => (
+    <DateTimeInput
       selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null}
       placeholderText={placeholder}
       isClearable

src/utils/DateInput.tsx

@@ -9,7 +9,7 @@ import './DateInput.scss';
 export type DateInputProps = ReactDatePickerProps;
 
 export const DateInput = (props: DateInputProps) => {
-  const { className, isClearable, selected } = props;
+  const { className, isClearable, selected, dateFormat } = props;
   const showCalendarIcon = !isClearable || isNil(selected);
   const ref = useRef<{ input: HTMLInputElement }>();
 
@@ -23,7 +23,7 @@ export const DateInput = (props: DateInputProps) => {
             options: { padding: 24 }, // This prevents the arrow to be placed on the very edge, which looks ugly
           },
         ]}
-        dateFormat="yyyy-MM-dd"
+        dateFormat={dateFormat ?? 'yyyy-MM-dd'}
         className={classNames('date-input-container__input form-control', className)}
         // @ts-expect-error The DatePicker type definition is wrong. It has a ref prop
         ref={ref}

src/utils/dates/DateTimeInput.tsx

@@ -0,0 +1,14 @@
+import { ReactDatePickerProps } from 'react-datepicker';
+import { FC } from 'react';
+import { DateInput } from '../DateInput';
+
+export type DateTimeInputProps = Omit<ReactDatePickerProps, 'showTimeSelect' | 'dateFormat' | 'timeIntervals'>;
+
+export const DateTimeInput: FC<DateTimeInputProps> = (props) => (
+  <DateInput
+    {...props}
+    dateFormat="yyyy-MM-dd HH:mm"
+    showTimeSelect
+    timeIntervals={5}
+  />
+);