Added test covering custom formatting in DateInput

src/utils/DateInput.tsx

@@ -4,6 +4,7 @@ import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
 import classNames from 'classnames';
+import { STANDARD_DATE_FORMAT } from './helpers/date';
 import './DateInput.scss';
 
 export type DateInputProps = ReactDatePickerProps;
@@ -23,7 +24,7 @@ export const DateInput = (props: DateInputProps) => {
             options: { padding: 24 }, // This prevents the arrow to be placed on the very edge, which looks ugly
           },
         ]}
-        dateFormat={dateFormat ?? 'yyyy-MM-dd'}
+        dateFormat={dateFormat ?? STANDARD_DATE_FORMAT}
         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/Time.tsx

@@ -1,5 +1,5 @@
 import { parseISO, format as formatDate, getUnixTime, formatDistance } from 'date-fns';
-import { isDateObject } from './helpers/date';
+import { isDateObject, STANDARD_DATE_AND_TIME_FORMAT } from './helpers/date';
 
 export interface TimeProps {
   date: Date | string;
@@ -7,7 +7,7 @@ export interface TimeProps {
   relative?: boolean;
 }
 
-export const Time = ({ date, format = 'yyyy-MM-dd HH:mm', relative = false }: TimeProps) => {
+export const Time = ({ date, format = STANDARD_DATE_AND_TIME_FORMAT, relative = false }: TimeProps) => {
   const dateObject = isDateObject(date) ? date : parseISO(date);
 
   return (

src/utils/dates/DateTimeInput.tsx

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

src/utils/helpers/date.ts

@@ -1,6 +1,10 @@
 import { format, formatISO, isBefore, isEqual, isWithinInterval, parse, parseISO as stdParseISO } from 'date-fns';
 import { OptionalString } from '../utils';
 
+export const STANDARD_DATE_FORMAT = 'yyyy-MM-dd';
+
+export const STANDARD_DATE_AND_TIME_FORMAT = 'yyyy-MM-dd HH:mm';
+
 export type DateOrString = Date | string;
 
 type NullableDate = DateOrString | null;
@@ -15,7 +19,10 @@ const formatDateFromFormat = (date?: NullableDate, theFormat?: string): Optional
   return theFormat ? format(date, theFormat) : formatISO(date);
 };
 
-export const formatDate = (theFormat = 'yyyy-MM-dd') => (date?: NullableDate) => formatDateFromFormat(date, theFormat);
+export const formatDate = (theFormat = STANDARD_DATE_FORMAT) => (date?: NullableDate) => formatDateFromFormat(
+  date,
+  theFormat,
+);
 
 export const formatIsoDate = (date?: NullableDate) => formatDateFromFormat(date, undefined);
 

src/visits/charts/LineChartCard.tsx

@@ -31,6 +31,7 @@ import { prettify } from '../../utils/helpers/numbers';
 import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
 import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../utils/theme';
 import './LineChartCard.scss';
+import { STANDARD_DATE_FORMAT } from '../../utils/helpers/date';
 
 interface LineChartCardProps {
   title: string;
@@ -65,10 +66,10 @@ const STEP_TO_DIFF_FUNC_MAP: Record<Step, (dateLeft: Date, dateRight: Date) => n
 
 const STEP_TO_DATE_FORMAT: Record<Step, (date: Date) => string> = {
   hourly: (date) => format(date, 'yyyy-MM-dd HH:00'),
-  daily: (date) => format(date, 'yyyy-MM-dd'),
+  daily: (date) => format(date, STANDARD_DATE_FORMAT),
   weekly(date) {
-    const firstWeekDay = format(startOfISOWeek(date), 'yyyy-MM-dd');
+    const firstWeekDay = format(startOfISOWeek(date), STANDARD_DATE_FORMAT);
-    const lastWeekDay = format(endOfISOWeek(date), 'yyyy-MM-dd');
+    const lastWeekDay = format(endOfISOWeek(date), STANDARD_DATE_FORMAT);
 
     return `${firstWeekDay} - ${lastWeekDay}`;
   },

test/utils/DateInput.test.tsx

@@ -1,5 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
+import { parseISO } from 'date-fns';
 import { DateInput, DateInputProps } from '../../src/utils/DateInput';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
@@ -30,4 +31,14 @@ describe('<DateInput />', () => {
     await user.click(screen.getByPlaceholderText('foo'));
     await waitFor(() => expect(container.querySelector('.react-datepicker')).toBeInTheDocument());
   });
+
+  it.each([
+    [undefined, '2022-01-01'],
+    ['yyyy-MM-dd', '2022-01-01'],
+    ['yyyy-MM-dd HH:mm', '2022-01-01 15:18'],
+    ['HH:mm:ss', '15:18:36'],
+  ])('shows date in expected format', (dateFormat, expectedValue) => {
+    setUp({ placeholderText: 'foo', selected: parseISO('2022-01-01T15:18:36'), dateFormat });
+    expect(screen.getByPlaceholderText('foo')).toHaveValue(expectedValue);
+  });
 });