Required property 'timeZone' missing or undefined React `CalendarInput` Component

Title: “Error with CalendarInput Component: ‘required property ‘timeZone’ missing or undefined’”

Hello Community,

I am currently working on application using React and have integrated the DHIS2 UI library for various components. However, I’ve encountered an issue when trying to use the CalendarInput component.

Error Message:

ERROR
required property 'timeZone' missing or undefined
TypeError: required property 'timeZone' missing or undefined
    at PrepareTemporalFields (http://localhost:3000/static/js/bundle.js:137726:32)
    at ToTemporalZonedDateTime (http://localhost:3000/static/js/bundle.js:138046:15)
    at ZonedDateTime.from (http://localhost:3000/static/js/bundle.js:144895:201)
    at http://localhost:3000/static/js/bundle.js:33115:103
    at mountMemo (http://localhost:3000/static/js/bundle.js:106169:23)
    at Object.useMemo (http://localhost:3000/static/js/bundle.js:106426:20)
    at useMemo (http://localhost:3000/static/js/bundle.js:122132:25)
    at useCalendarWeekDays (http://localhost:3000/static/js/bundle.js:33102:56)
    at useDatePicker (http://localhost:3000/static/js/bundle.js:33469:114)
    at Calendar (http://localhost:3000/static/js/bundle.js:2343:99)

My Code:

import React from 'react';
import { CalendarInput } from '@dhis2/ui';

const MyComponent = () => {
    return (
        <div>
            <CalendarInput
                calendar="ethiopic"
                date="2019-01-01"
                dir="ltr"
                locale="am-ET"
                timeZone="Europe/London"
                onChange={console.log}
            />
        </div>
    );
};

export default MyComponent;

What I’ve Tried:

1. Double-checked the documentation to ensure I’m using the component correctly.
2. Attempted to pass different timezone formats to the timeZone prop.
3. Searched through community forums and GitHub issues for similar errors but haven’t found a solution.
4. Verified that I have set the timeZone prop on the CalendarInput component.

Additional Information:

• DHIS2 App Runtime Version: 3.10.4
• Operating System: Ubuntu 20.04

It seems like there might be an issue with how I’m implementing the timeZone prop or there might be another underlying problem. Could someone please guide me on how to correctly use the timeZone prop with the CalendarInput component or provide any other insights on resolving this error?

@mozafar

2 posts - 1 participant

Read full topic