fix: use string for date inputs [DHIS2-12489] (#1785)

dhis2 · Sep 26, 2023 · 8dd932c · 8dd932c
1 parent c16c484
commit 8dd932c
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 59 deletions.
diff --git a/src/components/DatePicker/DatePicker.js b/src/components/DatePicker/DatePicker.js
@@ -1,24 +1,15 @@
 import { InputField } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { jsDateToISO8601 } from '../../utils/helper.js'
 
 const DatePicker = ({ name, error, label, date, onChange, dataTest }) => {
-    const onChangeHelper = ({ value }) => {
-        if (!value) {
-            onChange(value)
-        } else {
-            onChange(new Date(value))
-        }
-    }
-
-    const value = date && jsDateToISO8601(date)
+    const onChangeHelper = ({ value }) => onChange(value)
 
     return (
         <InputField
             type="date"
             name={name}
-            value={value}
+            value={date}
             label={label}
             onChange={onChangeHelper}
             inputWidth="200px"

diff --git a/src/components/DatePicker/DatePicker.test.js b/src/components/DatePicker/DatePicker.test.js
@@ -8,7 +8,7 @@ const props = {
     dataTest: 'date-picker',
     name: 'file',
     label: 'Start date',
-    date: new Date('10 Feb 2020 00:00:00 GMT'),
+    date: '2020-02-10',
     onChange: () => 1,
 }
 

diff --git a/src/components/DatePicker/DatePickerField.js b/src/components/DatePicker/DatePickerField.js
@@ -31,10 +31,7 @@ const Wrapper = ({
 
 Wrapper.propTypes = {
     input: PropTypes.shape({
-        value: PropTypes.oneOfType([
-            PropTypes.instanceOf(Date),
-            PropTypes.string,
-        ]),
+        value: PropTypes.string,
         onChange: PropTypes.func,
     }).isRequired,
     inputName: PropTypes.string.isRequired,
@@ -45,17 +42,15 @@ Wrapper.propTypes = {
     }).isRequired,
 }
 
-const DatePickerField = ({ name, validator, ...rest }) => {
-    return (
-        <Field
-            component={Wrapper}
-            name={name}
-            validate={validator}
-            inputName={name}
-            {...rest}
-        />
-    )
-}
+const DatePickerField = ({ name, validator, ...rest }) => (
+    <Field
+        component={Wrapper}
+        name={name}
+        validate={validator}
+        inputName={name}
+        {...rest}
+    />
+)
 
 DatePickerField.propTypes = {
     name: PropTypes.string.isRequired,

diff --git a/src/pages/DataExport/DataExport.js b/src/pages/DataExport/DataExport.js
@@ -32,6 +32,7 @@ import {
     ExportButton,
     FormAlerts,
 } from '../../components/Inputs/index.js'
+import { jsDateToISO8601 } from '../../utils/helper.js'
 import { onExport, validate } from './form-helper.js'
 
 const { Form } = ReactFinalForm
@@ -44,18 +45,20 @@ export const PAGE_DESCRIPTION = i18n.t(
 const PAGE_ICON = <DataIcon />
 
 const today = new Date()
+const threeMonthsBeforeToday = new Date(
+    today.getFullYear(),
+    today.getMonth() - 3,
+    today.getDate()
+)
+
 const initialValues = {
     selectedOrgUnits: [],
     includeChildren: true,
     selectedDataSets: [],
     format: defaultFormatOption,
     compression: defaultCompressionOption,
-    startDate: new Date(
-        today.getFullYear(),
-        today.getMonth() - 3,
-        today.getDate()
-    ),
-    endDate: today,
+    startDate: jsDateToISO8601(threeMonthsBeforeToday),
+    endDate: jsDateToISO8601(today),
     includeDeleted: false,
     dataElementIdScheme: defaultDataElementIdSchemeOption,
     orgUnitIdScheme: defaultOrgUnitIdSchemeOption,

diff --git a/src/pages/DataExport/form-helper.js b/src/pages/DataExport/form-helper.js
@@ -6,7 +6,6 @@ import {
     locationAssign,
     compressionToName,
     fileFormatToFileExtension,
-    jsDateToISO8601,
     pathToId,
 } from '../../utils/helper.js'
 
@@ -32,8 +31,8 @@ const valuesToParams = (
         `idScheme=${idScheme}`,
         `includeDeleted=${includeDeleted}`,
         `children=${includeChildren}`,
-        `startDate=${jsDateToISO8601(startDate)}`,
-        `endDate=${jsDateToISO8601(endDate)}`,
+        `startDate=${startDate}`,
+        `endDate=${endDate}`,
         `orgUnit=${selectedOrgUnits.map((o) => pathToId(o))}`,
         `dataSet=${selectedDataSets}`,
         `format=${encodeURIComponent(format)}`,

diff --git a/src/pages/EventExport/EventExport.js b/src/pages/EventExport/EventExport.js
@@ -33,6 +33,7 @@ import {
     IdScheme,
     defaultIdSchemeOption,
 } from '../../components/Inputs/index.js'
+import { jsDateToISO8601 } from '../../utils/helper.js'
 import { onExport, validate } from './form-helper.js'
 
 const { Form } = ReactFinalForm
@@ -45,18 +46,20 @@ export const PAGE_DESCRIPTION = i18n.t(
 const PAGE_ICON = <EventIcon />
 
 const today = new Date()
+const threeMonthsBeforeToday = new Date(
+    today.getFullYear(),
+    today.getMonth() - 3,
+    today.getDate()
+)
+
 const initialValues = {
     selectedOrgUnits: [],
     selectedPrograms: '',
     programStage: undefined,
     format: defaultFormatOption,
     compression: defaultCompressionOption,
-    startDate: new Date(
-        today.getFullYear(),
-        today.getMonth() - 3,
-        today.getDate()
-    ),
-    endDate: today,
+    startDate: jsDateToISO8601(threeMonthsBeforeToday),
+    endDate: jsDateToISO8601(today),
     includeDeleted: false,
     dataElementIdScheme: defaultDataElementIdSchemeOption,
     orgUnitIdScheme: defaultOrgUnitIdSchemeOption,

diff --git a/src/pages/EventExport/form-helper.js b/src/pages/EventExport/form-helper.js
@@ -3,11 +3,7 @@ import {
     DATE_AFTER_VALIDATOR,
 } from '../../components/DatePicker/DatePickerField.js'
 import { ALL_VALUE } from '../../hooks/useProgramStages.js'
-import {
-    jsDateToISO8601,
-    locationAssign,
-    pathToId,
-} from '../../utils/helper.js'
+import { locationAssign, pathToId } from '../../utils/helper.js'
 
 const onExport = (baseUrl, setExportEnabled) => (values) => {
     setExportEnabled(false)
@@ -42,8 +38,8 @@ const onExport = (baseUrl, setExportEnabled) => (values) => {
         `orgUnitIdScheme=${orgUnitIdScheme}`,
         `idScheme=${idScheme}`,
         `attachment=${filename}`,
-        `startDate=${jsDateToISO8601(startDate)}`,
-        `endDate=${jsDateToISO8601(endDate)}`,
+        `startDate=${startDate}`,
+        `endDate=${endDate}`,
         `ouMode=${inclusion}`,
         `format=${format}`,
         programStage != ALL_VALUE ? `programStage=${programStage}` : '',

diff --git a/src/pages/TEIExport/form-helper.js b/src/pages/TEIExport/form-helper.js
@@ -4,11 +4,7 @@ import {
     DATE_AFTER_VALIDATOR,
 } from '../../components/DatePicker/DatePickerField.js'
 import { OU_MODE_MANUAL_VALUE } from '../../components/Inputs/index.js'
-import {
-    locationAssign,
-    jsDateToISO8601,
-    pathToId,
-} from '../../utils/helper.js'
+import { locationAssign, pathToId } from '../../utils/helper.js'
 
 // calculate minimum set of parameters based on given filters
 const valuesToParams = (
@@ -78,11 +74,11 @@ const valuesToParams = (
         minParams.followUpStatus = followUpStatus
 
         if (programStartDate) {
-            minParams.programStartDate = jsDateToISO8601(programStartDate)
+            minParams.programStartDate = programStartDate
         }
 
         if (programEndDate) {
-            minParams.programEndDate = jsDateToISO8601(programEndDate)
+            minParams.programEndDate = programEndDate
         }
     }
 
@@ -92,12 +88,11 @@ const valuesToParams = (
 
     if (lastUpdatedFilter == 'DATE') {
         if (lastUpdatedStartDate) {
-            minParams.lastUpdatedStartDate =
-                jsDateToISO8601(lastUpdatedStartDate)
+            minParams.lastUpdatedStartDate = lastUpdatedStartDate
         }
 
         if (lastUpdatedEndDate) {
-            minParams.lastUpdatedEndDate = jsDateToISO8601(lastUpdatedEndDate)
+            minParams.lastUpdatedEndDate = lastUpdatedEndDate
         }
     }