fix: use CalendarInput in StartEndDate

dhis2 · Dec 6, 2024 · a4322fb · a4322fb
1 parent 68ac83b
commit a4322fb
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
         "start-server-and-test": "^2.0.3"
     },
     "dependencies": {
-        "@dhis2/analytics": "git+https://github.com/d2-ci/analytics.git#c19fab1c5abe7f15f3d7799ef1b5be8a720fa169",
+        "@dhis2/analytics": "git+https://github.com/d2-ci/analytics.git#19447b89130d615dc55e92d345b53869dca548ae",
         "@dhis2/app-runtime": "^3.11.2",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",

diff --git a/src/components/edit/thematic/ThematicDialog.js b/src/components/edit/thematic/ThematicDialog.js
@@ -304,7 +304,7 @@ class ThematicDialog extends Component {
             valueType,
             thematicMapType,
             systemSettings,
-            // periodsSettings,
+            periodsSettings,
         } = this.props
 
         const {
@@ -553,6 +553,7 @@ class ThematicDialog extends Component {
                                     endDate={endDate}
                                     setStartDate={setStartDate}
                                     setEndDate={setEndDate}
+                                    periodsSettings={periodsSettings}
                                 />
                             )}
                             {periodError && (

diff --git a/src/components/periods/StartEndDate.js b/src/components/periods/StartEndDate.js
@@ -1,5 +1,11 @@
 import i18n from '@dhis2/d2-i18n'
-import { Field, IconArrowRight16, InputField, colors } from '@dhis2/ui'
+import {
+    Field,
+    IconArrowRight16,
+    InputField,
+    CalendarInput,
+    colors,
+} from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
@@ -8,7 +14,10 @@ import { DEFAULT_START_DATE, DEFAULT_END_DATE } from '../../constants/layers.js'
 import styles from './StartEndDate.module.css'
 
 const StartEndDate = (props) => {
-    const { startDate, endDate, setStartDate, setEndDate } = props
+    const { startDate, endDate, setStartDate, setEndDate, periodsSettings } =
+        props
+
+    console.log('🚀 ~ StartEndDate ~ periodsSettings:', periodsSettings)
 
     const [start, setStart] = useState(startDate)
     const [end, setEnd] = useState(endDate)
@@ -17,11 +26,11 @@ const StartEndDate = (props) => {
     console.log('🚀 ~ StartEndDate ~ endDate:', typeof endDate)
     const hasDate = startDate !== undefined && endDate !== undefined
 
-    const onStartDateChange = ({ value }) => {
+    const onStartDateChange = ({ calendarDateString: value }) => {
         setStart(value)
         setStartDate(value)
     }
-    const onEndDateChange = ({ value }) => {
+    const onEndDateChange = ({ calendarDateString: value }) => {
         setEnd(value)
         setEndDate(value)
     }
@@ -32,25 +41,25 @@ const StartEndDate = (props) => {
             )}
         >
             <div className={styles.row}>
-                <InputField
-                    value={start.slice(0, 10)}
-                    type="date"
-                    onChange={onStartDateChange}
+                <CalendarInput
                     label={i18n.t('Start date')}
-                    inputWidth="200px"
-                    max="9999-12-31"
+                    calendar={periodsSettings.calendar}
+                    locale={periodsSettings.locale}
+                    date={start.slice(0, 10)}
+                    onDateSelect={onStartDateChange}
+                    placeholder="YYYY-MM-DD"
                     dataTest="start-date-input"
                 />
                 <div className={styles.icon}>
                     <IconArrowRight16 color={colors.grey500} />
                 </div>
-                <InputField
-                    value={end.slice(0, 10)}
-                    type="date"
-                    onChange={onEndDateChange}
+                <CalendarInput
                     label={i18n.t('End date')}
-                    inputWidth="200px"
-                    max="9999-12-31"
+                    calendar={periodsSettings.calendar}
+                    locale={periodsSettings.locale}
+                    date={end.slice(0, 10)}
+                    onDateSelect={onEndDateChange}
+                    placeholder="YYYY-MM-DD"
                     dataTest="end-date-input"
                 />
             </div>
@@ -60,6 +69,7 @@ const StartEndDate = (props) => {
 StartEndDate.propTypes = {
     startDate: PropTypes.string,
     endDate: PropTypes.string,
+    periodsSettings: PropTypes.object,
 }
 
 export default connect(null, { setStartDate, setEndDate })(StartEndDate)
diff --git a/yarn.lock b/yarn.lock
@@ -2018,9 +2018,9 @@
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2/analytics@git+https://github.com/d2-ci/analytics.git#c19fab1c5abe7f15f3d7799ef1b5be8a720fa169":
+"@dhis2/analytics@git+https://github.com/d2-ci/analytics.git#19447b89130d615dc55e92d345b53869dca548ae":
   version "26.9.3"
-  resolved "git+https://github.com/d2-ci/analytics.git#c19fab1c5abe7f15f3d7799ef1b5be8a720fa169"
+  resolved "git+https://github.com/d2-ci/analytics.git#19447b89130d615dc55e92d345b53869dca548ae"
   dependencies:
     "@dhis2/multi-calendar-dates" "^1.2.2"
     "@dnd-kit/core" "^6.0.7"